HTML表：保持列的宽度相同 [英] HTML table: keep the same width for columns

问题描述

我有一个有几组列的表。该表大于我的页面，所以我有一个控件来显示/隐藏这些组适合页面上的一些组。初始表看起来不错：所有列在组内的宽度大致相同。

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

到目前为止，表格看起来不错。点击>>。 电子商务专业版下的第一列比电子商务专业版下的其他列宽得多，看起来很奇怪。点击<<，此时值下的第一列太宽。至少在Firefox上。

我已尝试使用

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

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

任何HTML / CSS提示，

• 要隐藏列，我必须使用公开程度：collapse


• 现在似乎正在调整大小，我不知道为什么

解决方案

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

I have a table with several groups of columns. The table is larger than my page, so I have a control to show/hide some of these groups to fit on the page. The initial table looks good: all columns are about the same width within a group. But when I hide a group, the columns are not the same width anymore, and it looks bad.

Example: http://www.reviews-web-hosting.com/companies/apollohosting.html (broken link)

So far, the table looks fine. Click on >>. The first column under "Ecommerce Pro" is much wider than the other columns under "Ecommerce Pro", it looks odd. Click on <<, this time the first column under "Value" is too wide. At least on Firefox.

I've tried to use

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

but no luck. If I set a col to style="display: none", the set of columns is still displayed.

Any HTML/CSS tip to keep the columns with the same width withing a group?

Edit:

• to hide a column, I have to use visibility: collapse
• it seems to be resizing well now, I do not know why

解决方案

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>.

这篇关于HTML表：保持列的宽度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！