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.
到目前为止，这张桌子看起来还不错。点击> >。“电子商务专业人士”的第一栏比“电子商务专业人士”的其他栏目要宽得多，这看起来很奇怪。单击<<，这一次“值”下的第一列太宽。至少在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 to 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
- 它现在似乎调整得很好，我不知道为什么
4 个解决方案
#1
181
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>.
如果设置样式表布局:固定;在您的表上，您可以覆盖浏览器的自动列调整。然后浏览器将根据表的第一行中的单元格的宽度设置列宽度。将你的更改为 <标题> ，并删除其中的，然后为中的细胞设置固定宽度。
#2
16
give this style to td: width: 1%;
给td:宽度:1%;
#3
0
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 should render them all a similar width.
为什么不把这三个都设成33.3%的宽度呢?由于一次只显示3个，浏览器应该将它们呈现为相同的宽度。
#4
0
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.
那么，你为什么不(去掉边栏和)挤压表，使它没有显示/隐藏效果呢?现在我觉得很奇怪。桌子太结实了。否则，我认为斯昆利夫的建议应该是这样的。或者，如果您愿意，您可以设置表的精确宽度，并为表格单元设置百分比或像素宽度。
#1
181
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>.
如果设置样式表布局:固定;在您的表上，您可以覆盖浏览器的自动列调整。然后浏览器将根据表的第一行中的单元格的宽度设置列宽度。将你的更改为 <标题> ，并删除其中的，然后为中的细胞设置固定宽度。
#2
16
give this style to td: width: 1%;
给td:宽度:1%;
#3
0
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 should render them all a similar width.
为什么不把这三个都设成33.3%的宽度呢?由于一次只显示3个，浏览器应该将它们呈现为相同的宽度。
#4
0
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.
那么，你为什么不(去掉边栏和)挤压表，使它没有显示/隐藏效果呢?现在我觉得很奇怪。桌子太结实了。否则，我认为斯昆利夫的建议应该是这样的。或者，如果您愿意，您可以设置表的精确宽度，并为表格单元设置百分比或像素宽度。