HTML表格：保持列的宽度相同答案

【问题标题】：HTML table: keep the same width for columnsHTML表格：保持列的宽度相同
【发布时间】：2010-10-08 21:09:53
【问题描述】：

我有一张包含几组列的表格。该表比我的页面大，所以我有一个控件来显示/隐藏其中一些组以适应页面。初始表看起来不错：组内所有列的宽度大致相同。但是当我隐藏一个组时，列的宽度不再相同，而且看起来很糟糕。

到目前为止，该表看起来还不错。点击>>。 “Ecommerce Pro”下的第一列比“Ecommerce Pro”下的其他列宽得多，看起来很奇怪。点击

我尝试过使用

<colgroup><col /><col span="5" />...

但没有运气。如果我将 col 设置为 style="display: none"，则仍会显示列集。

有任何 HTML/CSS 提示可以使组内的列保持相同宽度吗？

编辑：

【问题讨论】：

标签： html css

【解决方案1】：

如果您在表格上设置样式table-layout: fixed;，您可以覆盖浏览器的自动列大小调整。然后浏览器将根据表格第一行中单元格的宽度设置列宽。把你的<thead>改成<caption>，去掉里面的<td>，然后给<tbody>中的单元格设置固定宽度。

【讨论】：

【解决方案2】：

将此样式赋予 td: width: 1%;

【讨论】：

【解决方案3】：

在您的情况下，因为您只显示 3 列：

Name    Value       Business
  or
Name    Business    Ecommerce Pro

为什么不将所有 3 设置为 33.3% 的宽度。由于一次只显示 3 个，浏览器应该将它们都呈现为相似的宽度。

【讨论】：

【解决方案4】：

好吧，你为什么不（摆脱侧边栏并）挤压表格，使其没有显示/隐藏效果？现在我觉得很奇怪。表太健壮了。
否则，我认为斯昆利夫的建议应该这样做。或者，如果您愿意，您可以设置表格的确切宽度，并为表格单元格设置百分比或像素宽度。

【讨论】：