How can I make html table columns (only the ones with text) evenly spaced

css, html

Solution

UPDATE

in case of more than one row :

Solution is as describe below, to have it work, you need `<tr>` to be displayed as a single table : http://jsfiddle.net/zTbGB/7/ http://jsfiddle.net/zTbGB/8/

tr {
    display:table;
     table-layout: fixed;
    width:100%;
}

=================================================

you can set : `table-layout:fixed` on table element. http://jsfiddle.net/zTbGB/1/

See: http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout

Then you can use the :empty selector :

td:empty {display:none;}

http://jsfiddle.net/zTbGB/3/

Problem

I wondering if there is an easy way to do this via HTML / CSS. I have a dynamic fixed-width table with 4 columns: ``` <table> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> ``` What I want is always have all the columns with data have all the same width. So if any column is completely empty, I want it to collapse and the remaining columns would all have the same width. I know that my jsFiddle is not correct, but I wanted to have one as a starting point. I did review How to get table cells evenly spaced?, but is not exactly what I am looking for. I also reviewed Evenly spaced fixed-width columns - in a responsive setting, but that one also not the same. EDIT: `td:empty {display: none}` is a not the solution because if another row has has text in that column, the table gets distorted. jsFiddle

Original source

Related problems