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](http://jsfiddle.net/zTbGB/) is not correct, but I wanted to have one as a starting point.

I did review [How to get table cells evenly spaced?](https://stackoverflow.com/questions/2859180/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](https://stackoverflow.com/questions/12662018/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](http://jsfiddle.net/zTbGB/4/)