Question

我有一个包含5列的html表。在设计时，我使用相对宽度％来指定每列的宽度。在运行时，javascript代码隐藏了三列，另外两列变得非常宽。我怎样才能让剩余的两列？宽度没变？但我不想用像素来修正宽度。

谢谢。

Answer 1

尝试给css中的每个TD或TH赋予最大宽度20％。

Answer 2

您可以尝试更改隐藏这些列的方式：如果将它们设置为display:none;（使用js设置的内联样式，或者通过添加/删除类），则可以将其更改为{ {1}} - 这样他们仍会占用空间，但不会显示。

Answer 3

如果您使用视口宽度vw而不是百分比%，它将起作用。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

如何在隐藏其他cols后修复html表格col宽度？

4 个答案: