隱藏其他列后如何修復html表格列寬度？

Question

我有一個包含 5 列的 html 表。 在設計時，我使用相對寬度%來指定每一列的寬度。 在運行時，javascript 代碼隱藏了三列，另外兩列變得很寬。 我怎樣才能讓剩下的兩列的寬度不改變？ 但我不想使用 pix 來固定寬度。

謝謝你。

Answer 1

嘗試為 css 中的每個 TD 或 TH 提供 20% 的最大寬度。

Answer 2

您可以嘗試更改這些列的隱藏方式：如果將它們設置為display:none; （使用由 js 設置的內聯樣式，或者通過添加/刪除類）然后您可以將其更改為visibility:hidden; - 這樣它們仍然會占用空間，但不會顯示。

Answer 3

如果您使用視口寬度vw而不是百分比%它將起作用。

 table { border-collapse: collapse; } td { border: 1px solid; width: 20vw; } td:nth-child(1), td:nth-child(2), td:nth-child(4) { display: none; }

 <table> <tr> <td>Some text hidden</td> <td>Some text hidden</td> <td>Some text visibile</td> <td>Some text hidden</td> <td>Some text visibile</td> </tr> </table>

Answer 4

我發現最好的方法是使用 float : left。

td {
    float:left;
}

<table>
  <tr>
    <td>Some text hidden</td>
    <td>Some text hidden</td>
    <td>Some text visibile</td>
    <td>Some text hidden</td>
    <td>Some text visibile</td>
  </tr>
</table>