全体の幅を変更せずにテーブルの行を非表示にする方法は？

Question

テーブル全体の幅に影響を与えずにテーブルの行を非表示にする方法はありますか？いくつかのテーブル行を表示/非表示にするJavaScriptがありますが、行を display：none; に設定すると、表示される行の内容に合わせてテーブルが縮小されます。

Answer 1

表の幅全体を保持する場合は、行を非表示にする前にそれを確認し、幅スタイルプロパティを明示的にこの値に設定できます。

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

ただし、これにより、行を非表示にすると個々の列がリフローする場合があります。これを軽減する可能な方法は、テーブルにスタイルを追加することです：

 table {
  table-layout: fixed;
 }

Answer 2

参考までに、levikのソリューションは完全に機能します。私の場合、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>