1

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.

  • 1
    `td:empty {display: none;}` - have you tried that? – UncaughtTypeError Aug 01 '17 at 11:58
  • 1
    Possible duplicate of [Hide empty cells in table](https://stackoverflow.com/questions/12023771/hide-empty-cells-in-table) – Stanislav Kvitash Aug 01 '17 at 11:58
  • Can you please duplicate both you html and your css into JSFiddle so everybody could "play" with the existing solution and find a right answer for you. Thanx – JSEvgeny Aug 01 '17 at 12:01
  • You want to hide the empty cell but still maintain the table structure? Clarify what your intended end result is and provide an example if possible. If you want the cell hidden it will inevitably affect the table structure. Alternatively, you could try `td:empty {visibility: hidden;}`, it shouldn't affect the document flow. – UncaughtTypeError Aug 01 '17 at 12:12
  • @UncaughtTypeError take a look at the post please. –  Aug 01 '17 at 13:05
  • @JavaEvgen i have updated the post. –  Aug 01 '17 at 13:06
  • @Player1 I would advise exploring conditional logic using javascript. The scope of your requirements now exceed the capabilities of CSS and HTML alone. So investigate javscript solutions using `if` conditional statements to check if given cells in given rows are empty and if you are still not coming right after tackling this you can always post a new question, with what you've tried and the SO community will assist where possible within reason. Good luck! – UncaughtTypeError Aug 01 '17 at 13:16

4 Answers4

2

You can use the CSS :empty Selector.

td:empty{
  display: none;
}
jp-jee
  • 1,502
  • 3
  • 16
  • 21
  • It's a bad idea, because rows are going to have different number of columns. Have added the result to question –  Aug 01 '17 at 12:03
  • Note that IE9-IE11 supports `:empty` but will not repaint/relayout the page if content is added/removed from an :empty selected element. (per caniuse.com) – SimianAngel Aug 01 '17 at 12:06
  • 1
    Well, that's what you've asked for. In case you want to keep the space, you might use `visibility: hidden`, which will keep the space used by the cell. It will hide background and border (and content, which is empty anyway). – jp-jee Aug 01 '17 at 12:09
  • @jp-jee i have added the snippet. Take a look please –  Aug 01 '17 at 13:06
  • I'm afraid it's not possible (using HTML&CSS only) to style `td`'s depending on others in another `tr`. CSS cannot traverse up in the DOM. – jp-jee Aug 02 '17 at 07:54
0

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>
Dhaarani
  • 1,350
  • 1
  • 13
  • 23
  • I would prefer jp-jee's answer over this, I don't understand the need for an 'empty' class, and it may confuse people looking for the correct answer. – Kodaloid Aug 01 '17 at 12:02
  • @Dhaarani take a look at the situation when there is content in one cell of the column. You'll get the result like second demo in my question –  Aug 01 '17 at 12:48
  • @Player1 img contain td only shown correct. if content there you have to hide – Dhaarani Aug 01 '17 at 12:50
  • @Dhaarani i have added fiddle with example –  Aug 01 '17 at 13:07
0

Try this 

td:empty ,th:empty{
  visibility: hidden;
}
Rob Quincey
  • 2,834
  • 2
  • 38
  • 54
sathish Anandan
  • 1
  • 8
0

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>
Dhaarani
  • 1,350
  • 1
  • 13
  • 23