Как скрыть заголовок строки, не влияя на выравнивание

Question

Я добавил пустой TR в верхнюю часть таблицы, чтобы правильно выровнять tds ниже, но когда я печатаю таблицу, этот tr виден с небольшой высоты:

<table>
<tr>
    <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>

Я пыталсячтобы изменить высоту на 0, но она не работает, подскажите, пожалуйста, лучший способ полностью скрыть ее, не влияя на показанные ниже значения.

Большое спасибо за вашу помощь

Answer 1

Использование CSS display:none или visibility:hidden

display:none означает, что данный тег вообще не будет отображаться на странице (хотя вы все равно можете взаимодействовать с ним через dom).Между другими тегами для него не будет места.

visibility:hidden означает, что в отличие от display:none, тег не виден, но для него выделено место на странице.Тег отображается, его просто не видно на странице.

Источник

#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>

Answer 2

Используйте 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>