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

Question

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

示例：http://www.reviews-web-hosting.com/companies/apollohosting.html （链接断开）

到目前为止，该表看起来很好。点击＆gt;＆gt;。 “电子商务专业版”下的第一栏比“电子商务专业版”下的其他专栏要宽得多，看起来很奇怪。单击＆lt;＆lt;，这次“Value”下的第一列太宽。至少在Firefox上。

我试过用

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

但没有运气。如果我将col设置为style =“display：none”，则仍会显示该组列。

任何HTML / CSS提示，以保持列具有相同的宽度与组？

修改

• 要隐藏列，我必须使用visibility：collapse
• 现在似乎正在调整好，我不知道为什么

Answer 1

如果在表格上设置样式table-layout: fixed;，则可以覆盖浏览器的自动列大小调整。然后，浏览器将根据表格第一行中单元格的宽度设置列宽。将您的<thead>更改为<caption>并移除其中的<td>，然后为<tbody>中的单元格设置固定宽度。

Answer 2

将此样式赋予td：width：1％;

Answer 3

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

Name    Value       Business
  or
Name    Business    Ecommerce Pro

为什么不将所有3设置为宽度为33.3％。因为一次只显示3个，所以浏览器应将它们全部渲染为相似的宽度。

Answer 4

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