Как скрыть строки таблицы без изменения общей ширины?

Question

Есть ли способ скрыть строки таблицы, не затрагивая общую ширину таблицы?У меня есть JavaScript, который показывает/скрывает некоторые строки таблицы, но когда для строк установлено значение display: none;, таблица сжимается, чтобы соответствовать содержимому видимых строк.

Answer 1

Если вы хотите сохранить общую ширину таблицы, вы можете проверить ее перед тем, как скрывать строку, и явно установить для свойства стиля ширины это значение:

table.style.width = table.clientWidth + "px";
table.rows[3].style.display = "none";

Однако это может привести к перекомпоновке отдельных столбцов при скрытии строки.Возможный способ смягчить это — добавить стиль к вашей таблице:

 table {
  table-layout: fixed;
 }

Answer 2

Для справки: решение Левика работает отлично.В моем случае с использованием jQuery решение выглядело примерно так:

$('#tableId').width($('#tableId').width());

Answer 3

Правило CSS visibility: collapse был разработан именно для этого.

tbody.collapsed > tr {
    visibility: collapse;
}

После добавления этого CSS вы можете активировать видимость из JS с помощью:

tbody.classList.toggle('collapsed');

Answer 4

В CSS table-layout: fixed; на вашей таблице указывает браузеру соблюдать размеры, указанные вами для высоты и ширины.Обычно это подавляет автоматическое изменение размера в браузере, если только вы не указали какие-либо подсказки относительно предпочтительных размеров строк и столбцов.

Answer 5

Вы можете сделать это, используя чистый HTML

<table border="1">
<colgroup>
    <col width="150px" />
    <col width="10px"  />
    <col width="220px" />
</colgroup>
<tr>
    <td valign="top">1</td>
    <td> </td>
    <td>2</td>
</tr>
<tr>
    <td>3</td>
    <td> </td>
    <td>4</td>
</tr>
</table>