HTML 表格宽度属性，带有 CSS 媒体标记的隐藏或折叠列
当我的屏幕宽度低于某个值时，我在 css 文件中使用 @media 标签来隐藏表格中的列。
我的桌子是这样设置的。
<table>
<colspan id="col1">
<colspan id="col2">
<colspan id="col3">
<thead>
......
隐藏发生在 CSS 文件中，如下所示
@media only screen and max-width: 500px) {
#col1 { visibility:collapsed ; }
}
列隐藏工作正常，我的问题是我将表宽度属性设置为 100% 或其父级。问题是带有隐藏列的表格确实继承了正确的宽度，它的行为就好像折叠/隐藏列仍然存在一样，所以我只是在表格右侧得到了空白。
我没有使用 CSS 或 HTMl 的经验，但我进行了搜索，但一无所获。我尝试将不可见列的宽度设置为零，但这没有什么区别。
作为参考，我正在 IE9 上测试此页面。
预先感谢您的任何帮助。
I am using @media tags in my css file to hide columns in my table when my screen width goes below a certain value.
my table is setup like this.
<table>
<colspan id="col1">
<colspan id="col2">
<colspan id="col3">
<thead>
......
And the hiding happens in the CSS file like this
@media only screen and max-width: 500px) {
#col1 { visibility:collapsed ; }
}
The column hiding works fine, my issue is that the I have my table width property set to 100% or its parent. The problem is that the table with the hidden column does inherit the correct width, it behaves as if the collapsed / hidden column is still there so I just get white space on the right of my table.
I am have no experience using CSS or HTMl but I have search and found nothing. I tried setting the width of the invisible columns to zero, but that made no difference.
For reference I am testing this page on IE9.
Thanks in advance for any help.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
可见性仅影响项目内容是否显示，例如，
visibility:hidden隐藏节点的内容，但不影响其占用的空间。尝试display: none隐藏内容及其占用的空间。Visibility only effects whether the contents of the item are shown or not,
visibility:hiddenfor instance, hides the contents of the node, but not the space it would take. Trydisplay: noneto hide both the contents and the space it would take.仅供参考，我发现了这个问题，并想出了另一种方法来解决它，即使用“class”而不是“id”。通过“class”定义每个“td”，如下所示：
然后在类上调用display:none（而不是id）：
我确信这不是最优雅的解决方案，但它有效！
FYI, I found this question and figured another way to solve it by using 'class' instead of 'id'. Define each of your 'td' by 'class', like this:
Then call your display:none on the class (rather than id):
I'm sure this isn't the most elegant solution, but it works!