HTML 表格：保持列的宽度相同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/570154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML table: keep the same width for columns
提问by Julien
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)
示例：http: //www.reviews-web-hosting.com/companies/apollohosting.html（断开的链接）
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.
到目前为止，桌子看起来不错。单击 >>。“Ecommerce Pro”下的第一列比“Ecommerce Pro”下的其他列宽得多，看起来很奇怪。点击<<，这次“值”下的第一列太宽了。至少在 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.
但没有运气。如果我将 col 设置为 style="display: none"，则仍会显示列集。
Any HTML/CSS tip to keep the columns with the same width withing a group?
任何 HTML/CSS 提示可以使组中的列保持相同的宽度？
Edit:
编辑：
- to hide a column, I have to use visibility: collapse
- it seems to be resizing well now, I do not know why
- 要隐藏一列，我必须使用可见性：折叠
- 它现在似乎调整得很好，我不知道为什么
回答by Ole Helgesen
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>.
如果您table-layout: fixed;在表格上设置样式，则可以覆盖浏览器的自动列大小调整。然后浏览器将根据表格第一行中单元格的宽度设置列宽。将您更改<thead>为<caption>并删除<td>它的内部，然后为 中的单元格设置固定宽度<tbody>。
回答by Tone ?koda
give this style to td: width: 1%;
将此样式赋予 td: width: 1%;
回答by scunliffe
In your case, since you are only showing 3 columns:
在您的情况下，因为您只显示 3 列：
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 shouldrender them all a similar width.
为什么不将所有 3 个设置为 33.3% 的宽度。由于一次只显示 3 个，因此浏览器应将它们全部呈现为相似的宽度。
回答by Adriana
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.
好吧，你为什么不（去掉侧边栏并）挤压桌子，让它没有显示/隐藏效果？现在对我来说看起来很奇怪。桌子太结实了。
否则我认为 scunliffe 的建议应该这样做。或者，如果您愿意，您可以设置表格的确切宽度并设置表格单元格的百分比或像素宽度。
