table宽度一样宽_HTML表：保持列的宽度相同

最新推荐文章于 2024-06-22 12:35:18 发布

荔枝保

最新推荐文章于 2024-06-22 12:35:18 发布

阅读量903

点赞数

文章标签： table宽度一样宽

本文链接：https://blog.csdn.net/weixin_29886825/article/details/112939680

版权

当表格中某些列被隐藏时，列宽会发生变化，导致显示不美观。通过设置`table-layout: fixed;`并指定第一行单元格宽度，可以确保列宽保持一致，即使在隐藏列后。只需将`visibility: collapse;`用于隐藏列，而不是`display: none;`。

摘要由CSDN通过智能技术生成

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.

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 <

I've tried to use

...

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 to and remove the inside of it, and then set fixed widths for the cells in