仅使用 CSS 和 HTML 隐藏空列答案

【问题标题】：Hide empty column using CSS and HTML only仅使用 CSS 和 HTML 隐藏空列
【发布时间】：2018-01-08 06:43:57
【问题描述】：

有没有办法使用简单的 html 表格隐藏空列？

我已经研究过这个问题，但不知道如何避免空列的每个单元格中的空间很小。

我知道有一些 jQuery 解决方案，我可以避免在后端显示空列，但我只需要 CSS 解决方案。

演示：

td{border: 1px solid red;}
input[type="image"]{width:100px;}

<h1>
  Column with one not emty cell.
</h1>
<table style="width: 100%">
    <tr>
        <td width="100px">test words</td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td>123</td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
    </tr>
    <tr>
        <td width="100px">test words</td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
    </tr>
</table>
<h1>
  Column with all emty cells.
</h1>
<table style="width: 100%">
    <tr>
        <td width="100px">test words</td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
    </tr>
    <tr>
        <td width="100px">test words</td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
    </tr>
</table>

有两种情况：当列完全为空时（您可以在空单元格中看到一个 1-2px 的孔）以及当列在某些单元格中包含内容时。

所以任务是： 当列没有空单元格时，表格必须按原样工作当列完全为空时，该列必须完全隐藏，相邻列之间不得有任何空格。

【问题讨论】：

td:empty {display: none;} - 你试过了吗？
Hide empty cells in table的可能重复
您能否将您的 html 和您的 css 复制到 JSFiddle 中，以便每个人都可以“玩”现有的解决方案并为您找到正确的答案。谢谢
您想隐藏空单元格但仍保持表格结构？阐明您的预期最终结果是什么，并在可能的情况下提供示例。如果要隐藏单元格，将不可避免地影响表格结构。或者，您可以尝试td:empty {visibility: hidden;}，它应该不会影响文档流。
@UncaughtTypeError 请看一下帖子。

标签： html css

【解决方案1】：

您可以使用CSS :empty Selector。

td:empty{
  display: none;
}

【讨论】：

这是个坏主意，因为行将有不同的列数。已将结果添加到问题中
请注意，IE9-IE11 支持:empty，但如果从 :empty 选定元素中添加/删除内容，则不会重新绘制/重新布局页面。（根据 caniuse.com）
嗯，这就是你所要求的。如果您想保留空间，您可以使用visibility: hidden，它将保留单元格使用的空间。它将隐藏背景和边框（以及内容，无论如何都是空的）。
@jp-jee 我已经添加了 sn-p。请看一下
恐怕不可能（仅使用 HTML 和 CSS）根据另一个 tr 中的其他人来设置 td 的样式。 CSS 不能在 DOM 中向上遍历。

【解决方案2】：

td:empty,th:empty {
  display: none;
}
td{width:10%;}
td input{width:100%;}

<table style="width: 100%">
    <tr>
        <td width="100px">test words</td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
    </tr>
    <tr>
        <td width="100px">test words</td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
    </tr>
</table>

【讨论】：

我更喜欢 jp-jee 的答案，我不明白需要一个“空”类，它可能会使寻找正确答案的人感到困惑。
@Dhaarani 看看列的一个单元格中有内容时的情况。你会在我的问题中得到第二个演示的结果
@Player1 img 包含 td 仅显示正确。如果有内容，你必须隐藏
@Dhaarani 我已经添加了示例

【解决方案3】：

试试这个

td:empty ,th:empty{
  visibility: hidden;
}

【讨论】：

【解决方案4】：

td{border: 1px solid red;}
input[type="image"]{width:100px;}
.hideemptydiv td:empty{display:none;}

<h1>
  Column with one not emty cell.
</h1>
<table style="width: 100%">
    <tr>
        <td width="100px">test words</td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td>123</td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
    </tr>
    <tr>
        <td width="100px">test words</td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
    </tr>
</table>
<h1>
  Column with all emty cells.
</h1>
<table style="width: 100%" class="hideemptydiv">
    <tr>
        <td width="100px">test words</td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
    </tr>
    <tr>
        <td width="100px">test words</td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
        <td></td>
        <td><input type="image" src="http://vectips.com/wp-content/uploads/2014/08/013.jpg"></td>
    </tr>
</table>

【讨论】：

@Player1 现在检查一下。
非常接近。失败案例：表格既有完全空的列，又有一个填充单元格的列。在这种情况下结构崩溃
我可以使用 jquery 或 javascript @Player1
没有。 jQuery 解决方案存在，我已经发现但它不适合我