隐藏其他列后如何修复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>