带有 CSS 媒体标签的隐藏或折叠列的 HTML 表格宽度属性

Question

当我的屏幕宽度低于特定值时，我在我的 css 文件中使用 @media 标签来隐藏我表格中的列。

我的 table 是这样布置的。

<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 上测试此页面。

在此先感谢您的帮助。

Answer 1

可见性只影响元素的内容是否显示，例如visibility:hidden，隐藏节点的内容，而不是它所占用的空间。尝试使用 display: none 来隐藏内容及其占用的空间。