我有一个包含几组列的表格。该表比我的页面大，所以我有一个控件来显示/隐藏其中一些组以适合页面。初始表看起来不错:组内所有列的宽度大致相同。但是当我隐藏一个组时，列的宽度不再相同，看起来很糟糕。
示例:http://www.reviews-web-hosting.com/companies/apollohosting.html (断开的链接)
到目前为止，表格看起来还不错。点击>>。 “Ecommerce Pro”下的第一列比“Ecommerce Pro”下的其他列宽得多，看起来很奇怪。单击 <<，这次“值”下的第一列太宽了。至少在 Firefox 上是这样。
我试过
<colgroup><col /><col span="5" />...
但运气不好。如果我将 col 设置为 style="display: none"，列集仍会显示。
有什么 HTML/CSS 技巧可以使组内的列保持相同的宽度？
编辑:
- 要隐藏列，我必须使用 visibility: collapse
- 现在好像变大了，不知道为什么
最佳答案
如果设置样式 table-layout: fixed;在您的表格上，您可以覆盖浏览器的自动列大小调整。然后，浏览器将根据表格第一行中单元格的宽度设置列宽。更改您的 <thead>至 <caption>并删除 <td>在其中，然后为 <tbody> 中的单元格设置固定宽度.
关于HTML 表格 : keep the same width for columns，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/570154/