Geek asks and answers

How can I make the columns of an HTML table (only those with text) evenly distributed

I am wondering if there is an easy way to do this using HTML / CSS.

I have a dynamic fixed width table with 4 columns:

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

I want all data columns to have the same width.

So, if any column is completely empty, I want it to fall, and the rest of the columns have the same width.

I know that my jsFiddle is incorrect, but I wanted to have it as a starting point.

I looked. How to get table cells evenly distributed? but that’s not quite what I am looking for. I also looked at fixed-width columns evenly - in a flexible setting , but this is also not the same.

EDIT

td:empty {display: none} - , , , . jsFiddle

+3
3

:

, , <tr> : http://jsfiddle.net/zTbGB/7/ http://jsfiddle.net/zTbGB/8/

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

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

: table-layout:fixed . http://jsfiddle.net/zTbGB/1/

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

: empty:

td:empty {display:none;}

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

+7

. , . CSS :: . IE8 , , IE8, javascript, <td>.

CSS

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

I tried the code for you using jQuery :), you can use the following code with 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/

+1
source

More articles:


All Articles