Como ocultar linhas da tabela sem redimensionar largura total?

Question

Existe uma maneira de linhas ocultar a tabela sem afetar a largura geral da tabela? Eu tenho alguns javascript que mostra / oculta algumas linhas da tabela, mas quando as linhas são definidas para display: none;, a tabela com encolhe para caber o conteúdo das linhas visíveis.

Answer 1

Se você estiver olhando para preservar a largura total da tabela, você pode verificá-lo antes de esconder uma linha, e explicitamente defina a propriedade estilo de largura para este valor:

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

No entanto, isto pode fazer com que as colunas individuais de refluxo quando você ocultar a linha. Uma maneira possível mitigar isso é adicionar um estilo a sua mesa:

 table {
  table-layout: fixed;
 }

Answer 2

Para referência, a solução da levik funciona perfeitamente. No meu caso, usando jQuery, a solução parecia algo como isto:

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

Answer 3

visibility: collapse foi projetado exatamente para isso.

tbody.collapsed > tr {
    visibility: collapse;
}

Depois de adicionar este CSS você poderia desencadear a visibilidade de JS com:

tbody.classList.toggle('collapsed');

Answer 4

Em CSS, table-layout: fixed; na sua mesa instrui o navegador para honrar os tamanhos que você especificou para alturas e larguras. Isso geralmente suprime pelo navegador, a menos que você não tenha dado nenhuma pista quanto aos tamanhos preferidos de suas linhas e colunas de dimensionamento automático.

Answer 5

Você pode fazer isso usando HTML puro

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