如何在不影响对齐的情况下隐藏行标题

Question

我在表格的顶部添加了一个空的TR，以正确对齐下面的tds，但是当我打印表格时，该TR的高度很小：

{
  "Id": "1",
  "Description": "LayoutDesc",
  "Venue": {
    "Id": 5,
    "Adress": "VenueAdress",
    "Description": "VenueDesc"
  }
}

我试图将高度更改为0，但是它不起作用，能否请您说出完全隐藏高度而不影响以下tds的最佳方法。

非常感谢您的帮助

Answer 1

使用visibility:collapse。它将在保持宽度的同时隐藏tr

没有visibility:collapse

#head
{
background-color:blue;


}

<table>
<tr id="head">
    <td style="width: 10%;"></td>
    <td style="width: 40%;"></td>
    <td style="width: 16%;"></td>
    <td style="width: 10%;"></td>
    <td style="width: 7%;"></td>
    <td style="width: 7%;"></td>
    <td style="width: 10%;"></td>
</tr>
<tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
</tr>
<tr>
...
</tr>
...
</table>

使用visibility:collapse

#head
{
background-color:blue;
visibility: collapse;

}

<table>
<tr id="head">
    <td style="width: 10%;"></td>
    <td style="width: 40%;"></td>
    <td style="width: 16%;"></td>
    <td style="width: 10%;"></td>
    <td style="width: 7%;"></td>
    <td style="width: 7%;"></td>
    <td style="width: 10%;"></td>
</tr>
<tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
</tr>
<tr>
...
</tr>
...
</table>

Answer 2

使用CSS display:none或visibility:hidden

display:none表示相关标签根本不会出现在页面上（尽管您仍然可以通过dom与之交互）。其他标签之间将没有分配空间。

visibility:hidden意味着与display:none不同，该标签不可见，但在页面上为其分配了空间。标签已呈现，只是在页面上看不到。

Source

#hideTr
{
visibility:hidden /* OR display:none */

}

<table>
<tr id="hideTr">
    <td style="width: 10%;"></td>
    <td style="width: 40%;"></td>
    <td style="width: 16%;"></td>
    <td style="width: 10%;"></td>
    <td style="width: 7%;"></td>
    <td style="width: 7%;"></td>
    <td style="width: 10%;"></td>
</tr>
<tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
</tr>
<tr>
...
</tr>
...
</table>