Question

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

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

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

样本：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

所以任务是： 当列没有空单元格时，表格必须按原样运行当列完全为空时，必须完全隐藏此列，并且不要在相邻列之间执行任何空间。

Answer 1

您可以使用CSS :empty Selector。

td:empty{
  display: none;
}

Answer 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>

Answer 3

试试这个

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

Answer 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>

仅使用CSS和HTML隐藏空列

4 个答案: