HTML 表: 列保持相同的宽度

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

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

到目前为止，桌子看起来还不错。点击 > >。“电子商务专业版”的第一栏比“电子商务专业版”的其他栏宽得多，看起来很奇怪。单击 < < ，此时“ Value”下的第一列太宽。至少在 Firefox 上是这样的。

我试过用

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

如果我设置 colto style = “ display: none”，那么这组列仍然显示。

任何 HTML/CSS 技巧，以保持同一宽度的列组？

编辑:

  • 要隐藏一列，我必须使用可见性: 塌陷
  • 现在似乎调整得很好，我不知道为什么
155362 次浏览
小开

In your case, since you are only showing 3 columns:

Name    Value       Business
or
Name    Business    Ecommerce Pro

why not set all 3 to have a width of 33.3%. since only 3 are ever shown at once, the browser should render them all a similar width.

小开
最佳答案

If you set the style table-layout: fixed; on your table, you can override the browser's automatic column resizing. The browser will then set column widths based on the width of cells in the first row of the table. Change your <thead> to <caption> and remove the <td> inside of it, and then set fixed widths for the cells in <tbody>.

小开

well, why don't you (get rid of sidebar and) squeeze the table so it is without show/hide effect? It looks odd to me now. The table is too robust.
Otherwise I think scunliffe's suggestion should do it. Or if you wish, you can just set the exact width of table and set either percentage or pixel width for table cells.

小开

give this style to td: width: 1%;


提交答案