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

Posted 2023-02-21

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

【英文标题】：HTML table width property with hidden or collapsed columns with CSS media tags

【发布时间】：2011-11-12 17:43:38

【问题描述】：

当我的屏幕宽度低于某个值时，我在我的 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 上测试此页面。

提前感谢您的帮助。

【参考方案1】：

仅供参考，我发现了这个问题，并想出了另一种解决方法，即使用“class”而不是“id”。通过“类”定义每个“td”，如下所示：

<tr>
<td class="col1">SAMPLE</td>
<td class="col2">SAMPLE</td>... etc

然后调用你的 display:none 类（而不是 id）：

@media only screen and (max-width: 600px) .col1  display: none;

我确信这不是最优雅的解决方案，但它确实有效！

【参考方案2】：

可见性只影响项目的内容是否显示，例如visibility:hidden，隐藏节点的内容，但不影响它所占用的空间。尝试display: none 隐藏内容和占用的空间。

【讨论】：

display:none 完成了这项工作。但是它在 colspan 上不起作用。我必须通过分别获取 和 的第 n 个属性来设置它 根据***.com/questions/1238115/… 它不起作用，因为只有 4 个属性适用于列。可见性是一，显示不是。