隐藏HTML表格列

时间：2016-11-21 03:06:54

标签： html css

我有一个包含项目和日期的HTML表格。我们的想法是，该项目的第一列将是该项目的每日使用量，第二列将是该项目的下载货物，第三列将是该项目的每日库存。我的目标是自动隐藏前两列，然后通过jquery鼠标悬停再次查看它们。我的想法是为每一行添加一个类并将前两行设置为隐藏，然后在jquery mouseover上我将.removeClass，这样当项目行突出显示时，将显示所有3行。

我的问题是：我尝试过使用CSS display：none;但似乎不适用于html表td元素？我可以使用任何其他CSS命令，还是我必须采用不同的方式？

下面是一个试图使用的表的示例。

＆＃13;
＆＃13; 
let backgroundTileDefinition = backgroundTileDefinition(key: "Tile1")
＆＃13; 
table,th, td {
  
    border: 1px solid black;
    border-collapse: collapse;
       
}
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

你可以使用这样的东西隐藏孩子。给主表一个#ID。 这代表2隐藏

#tableID td:nth-child(-n+2) {
    display: none;
}

以下是适合您的示例。在这种情况下更改了文本颜色..但对于您的情况，我将使用visibility：hidden与display：none相反，因为这将保持单元格间距不变。

你可以看到我已经注释了应该在哪里使用它。

 $("td:nth-child(4)").hover(function() {
   $(this).siblings("td:nth-child(-n+3)").addClass("fook");
 }, function() {
   $(this).siblings("td:nth-child(-n+3)").removeClass("fook");
 });
 
  $("td:nth-child(7)").hover(function() {
   $(this).siblings("td:nth-child(5n),td:nth-child(7n-1)").addClass("fook");
 }, function() {
   $(this).siblings("td:nth-child(5n),td:nth-child(7n-1)").removeClass("fook");
 });
 
   $("td:nth-child(10)").hover(function() {
   $(this).siblings("td:nth-child(8n),td:nth-child(10n-1)").addClass("fook");
 }, function() {
   $(this).siblings("td:nth-child(8n),td:nth-child(10n-1)").removeClass("fook");
 });
 
  $("td:nth-child(13)").hover(function() {
   $(this).siblings("td:nth-last-child(-n+3)").addClass("fook");
 }, function() {
   $(this).siblings("td:nth-last-child(-n+3)").removeClass("fook");
 });
* {
  text-align: center
}
td:nth-child(3n+0),td:nth-child(3n-1){
  background: pink;
  color: pink;
  /* visibility: hidden; */
}
td:nth-child(3n+1){
  background: white;
  cursor: pointer;
  color: black !important;
}
.fook {
  color: yellow !important;
  /* visibility: visible !important; */
}
#mytable {
  width: 100%
}
#mytable th:nth-child(-n+1) {
  background: lightgray;
}
#mytable th:nth-child(+1n+2) {
  background: lightcoral;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
  <tr>
    <th>Item #</th>
    <th colspan='3'>100017</th>
    <th colspan='3'>100018</th>
    <th colspan='3'>100019</th>
    <th colspan='3'>100020</th>
  </tr>
  <tr>
    <th>Component</th>
    <th colspan='3'><u>chips</u></th>
    <th colspan='3'><u>butterfingers</u></th>
    <th colspan='3'><u>Flat Pretzels</u></th>
    <th colspan='3'><u>Milk Chocolate</u></th>
  </tr>
  <tr class="first">
    <th>2016-01-03</th>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
  </tr>
  <tr class="second">
    <th>2016-01-04</th>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
  </tr>
  <tr class="first">
    <th>2016-01-05</th>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
  </tr>
  <tr class="fourth">
    <th>2016-01-06</th>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
  </tr>
  <tr class="fifth">
    <th>2016-01-07</th>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
    <td class='dailyusagetable'>0</td>
    <td class='incommingtable'>0</td>
    <td>0</td>
  </tr>
</table>

答案 1 :(得分：1)

在此示例中，此td类是隐藏的

<html>
    <head>

        <style>
            .dailyusagetable, .incommingtable {
                display:none;
            }
        </style>
    </head>
    <body>

        <table>
            <tr>
                <th>Item #</th>
                <th colspan='3'>100017</th>
                <th colspan='3'>100018</th>
                <th colspan='3'>100019</th>
                <th colspan='3'>100020</th>
            </tr>
            <tr>
                <th>Component</th>
                <th colspan='3'><u>chips</u></th>
                <th colspan='3'><u>butterfingers</u></th>
                <th colspan='3'><u>Flat Pretzels</u></th>
                <th colspan='3'><u>Milk Chocolate</u></th>
            </tr>
            <tr>
                <th>2016-01-03</th>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
            </tr>
            <tr>
                <th>2016-01-04</th>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
            </tr>
            <tr>
                <th>2016-01-05</th>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
            </tr>
            <tr>
                <th>2016-01-06</th>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
            </tr>
            <tr>
                <th>2016-01-07</th>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
                <td class='dailyusagetable'>0</td>
                <td class='incommingtable'>0</td>
                <td>0</td>
            </tr>
        </table>  

    </body>


</html>

查看您的代码

答案 2 :(得分：1)

如果你只想隐藏你的桌子，但保持你的间距，那么使用：

visibility: hidden;

否则，

display:none;

是要走的路。

相关问题
最新问题