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

77

我有一个包含几组列的表。该表大于我的页面，因此我有一个控件来显示/隐藏这些组中的一些以适合页面。初始表看起来不错：一个组中的所有列都具有相同的宽度。但是当我隐藏一个组时，列的宽度不再相同，看起来很糟。

到目前为止，桌子看起来还不错。点击>>。“ Ecommerce Pro”下的第一列比“ Ecommerce Pro”下的其他列宽得多，看起来很奇怪。单击<<，这一次“值”下的第一列太宽。至少在Firefox上。

我尝试使用

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

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

有任何HTML / CSS技巧可将列的宽度保持成组？

编辑：

html css

— 朱利安
source

身份验证对话框阻止我使用该站点。

— Diodeus-James MacFarlane

这只会阻止我看到一些图像。

— Iain M Norman

这是一个错误的.htaccess，要求进行身份验证以将图像保存在/ sites下。我今晚会解决。我仍在构建网站。

— 朱利安

198

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

— 奥莱·海尔格森
source

11

单个添加的修改table-layout: fixed;为我解决了相同的问题（FFox 11）。

— heltonbiker

11

如果需要设置单元格宽度，使用固定表格布局有什么意义？

— 2012年

20

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

— 斯科达色调
source

2

如果表本身具有固定的宽度，或者列数未知，这实际上可以解决问题，或者width: 100%

— Lars Ebert

0

就您而言，由于您仅显示3列：

Name    Value       Business
  or
Name    Business    Ecommerce Pro

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

— 松利夫
source

5

当我隐藏/显示不同的列时，单元格的数量可能会增加

— Julien

0

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

— 阿德里安娜
source

有些桌子太大了，没有侧栏事件。

— 朱利安