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

Question

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

Answer 1

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

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

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

 table {
  table-layout: fixed;
 }

Answer 2

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

tbody.collapsed > tr {
    visibility: collapse;
}

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

tbody.classList.toggle('collapsed');

Answer 3

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

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

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>