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


Tags: html,css

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



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/


    CSS Howto..

    How to prevent from loading a css and a js sheet at only one Rails controller?

    How to play specific keyframes with css animation

    how to really include html codes inside php

    How to trigger one element inside a div on mouse hover in CSS

    How to have a different “placeholder style” and at the same time a different “text-input style” in Rails with CSS?

    How to apply CSS class on current element using jQuery

    how to add empty space between cells in tables?

    How to colorize an image in CSS?

    How to validate HTML/CSS running in localhost?

    I need a max-margin CSS property, but it doesn't exist. How could I fake it?

    Letters appear out of the comment box in php site after comment is added. How to limit the shown letters per line?

    How to make a image stay at the bottom but not rise up

    How to I create two containers with different backgrounds? [duplicate]

    How to center an image over another image in CSS

    How to dynamically change CSS class of DIV tag?

    How can I split code-blocks into a list?

    how to remove xlink default styling

    How do I change the z-index of a div when the user mouses over it?

    I have the CSS & JS, how do I convert that to erb for my Rails app?

    How to break text inside a parent div with white-space:nowrap in CSS?

    how to properly align list items vertically?

    How to expand my CSS3 menu and reduce its width

    How to change the css and html file at the same time

    In LESS, how to rewrite this CSS composition style?

    How to get CSS of element (% vs px)

    html-css-how to make opeanable vertical menu [closed]

    CSS html : non-standard picture frame: how to imlement with CSS and HTML?

    How to style a selected radio button AND include space as clickable?

    How to move a CSS class below another? [closed]

    how to show limited text in css [closed]