如何使html表列（只有文本的列）均匀分布

Question

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

Answer 1

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/

Answer 2

You can try this Fiddle . Seems to work well. In the CSS below, I'm using the ::empty pseudo selector. That selector won't work in IE8 or less, so if you're supporting IE8, then you'll need to augment this code with some javascript to hide those empty <td> 's.

CSS

table
{
    width: 400px;
    table-layout: fixed;
}
td:empty { display: none; }

Answer 3

I have tried code for you using jQuery :) , you can use following code using jQuery:

$("#parent td").each(function() {


     if ($(this).text() == ''){
         var val=$(this).val();
        //alert(len);
     $(this).remove();


     }

});
var len=$("#parent td").length;
         var wit=100/len;
     //wit=wit+"%";
$("table td").width(wit + "%");

updated here http://jsfiddle.net/zTbGB/6/