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

Question

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

示例:http://www.reviews-web-hosting.com/companies/apollohosting.html(链接断开)

到目前为止,该表看起来很好.点击>>."电子商务专业版"下的第一栏比"电子商务专业版"下的其他专栏要宽得多,看起来很奇怪.点击<<,这次"Value"下的第一列太宽.至少在Firefox上.

我试过用

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

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

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

编辑:

• 要隐藏列,我必须使用可见性:崩溃
• 它似乎现在调整好,我不知道为什么

Answer 1

如果table-layout: fixed;在表上设置样式,则可以覆盖浏览器的自动列大小调整.然后,浏览器将根据表格第一行中单元格的宽度设置列宽.更改<thead>到<caption>并删除<td>它的内部,然后设置固定宽度在细胞<tbody>.

Answer 2

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