Hide empty column using CSS and HTML only

Question

Is there any way to hide empty column using simple html table?

I've researched this question and have no idea of how to avoid little empty space in every cell of empty column.

I know that there are some jQuery solutions and I can avoid displaying empty column on the backend side, but i need only CSS solution.

DEMO:

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>

There are two cases in the fiddle: when column is completely empty (you can see a 1-2px hole in empty cells) and when column has content in some cells.

So the task is: When column has not empty cell, table must work as it is When column is completely empty, this column must be fully hidden and musn't perform any space between neighbor columns.

Answer 1

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>

Answer 2

Try this

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

Answer 3

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 4

You can use the CSS :empty Selector.

td:empty{
  display: none;
}