如何在不調整整體寬度的情況下隱藏表格行？

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

作為參考，levik 的解決方案非常有效。 就我而言，使用 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>