HTML Table - 100% width table, combination of fixed width and UNIFORM fluid columns

Question

I'm trying to build a custom calendar in HTML and Javascript where you can drag and drop tasks from one day to another. I would like to have the first column and last two columns as fixed width and have the remaining columns (Monday through to Friday) fluid so that the table always fills up 100% of it's parent.

The problem that I am having is that the fluid TD's automatically size themselves based on how much content is in them, meaning that when I drag a task from one day to another the columns widths resize. I would like to have Monday to Friday be exactly the same size regardless of content and without setting text-overflow:hidden; (as the tasks always need to be visible)

i.e. I want the gray columns fixed width and the red columns fluid but uniform with each-other regardless of the content within them.

Edit: I'm using jQuery for the drag and drop functionality so a JavaScript solution would also be OK (although not preferable).

JSFiddle Live example

HTML:

<table>
  <tr>
    <th class="row_header">Row Header</th>
    <th class="fluid">Mon</th>
    <th class="fluid">Tue</th>
    <th class="fluid">Wed</th>
    <th class="fluid">Thurs</th>
    <th class="fluid">Fri</th>
    <th class="weekend">Sat</th>
    <th class="weekend">Sun</th>
  </tr>
  <tr>
    <td>Before Lunch</td>
    <td>This col will be wider than the others because it has lots of content...</td>
    <td></td>
    <td></td>
    <td></td>
    <td>But I would really like them to always be the same size!</td>
    <td></td>
    <td></td>
  </tr>
</table>

CSS:

    table {
        width: 100%;
    }       

    td, th {
        border:1px solid black;
    }  

    th {
        font-weight:bold;            
        background:red;
    }

    .row_header {
        width:50px;
        background:#ccc;
    }

    .weekend {
        width:100px;
        background:#ccc;
    }

    .fluid {
        ???
    }

Blent

Very good question. I'm not sure it can be done with pure CSS. You'll probably need to utilize JavaScript to calculate the total width of the table and apply styles accordingly. – Voice

Answer 1

Using jQuery (could probably be done with regular JS too, but I prefer it for this kind of jobs):

(Note: I gave the table an ID so it'll be easier to select, can be done without it with a bit of tinkering)

    $(function() {
        var $my_table = $("#my_table")
            ,current_width = $my_table.width()
            ,fluid_columns = $("table .fluid")
            ,spread_width = (current_width - 150) / fluid_columns.length;

        fluid_columns.width(spread_width);

        $(window).on("resize", function() {
            current_width = $my_table.width();
            spread_width = (current_width - 150) / fluid_columns.length;
            fluid_columns.width(spread_width);
        })
    });

Lizliza

Yeah, that gets us pretty close. Unfortunately at very small resolutions it still breaks down. Perhaps I need to just realise that the browser is trying to help me and put a mid-width on the table section to avoid the extreme example. – Blent

Answer 2

Danny,

I think this is what you are looking.

Fiddle here http://jsfiddle.net/T6YNK/22/

Checked in Chrome.

Code

                <table>
      <tr>
        <th class="row_header">Row Header</th>
        <th class="fluid">Mon</th>
        <th class="fluid">Tue</th>
        <th class="fluid">Wed</th>
        <th class="fluid">Thurs</th>
        <th class="fluid">Fri</th>
        <th class="weekend">Sat</th>
        <th class="weekend">Sun</th>
      </tr>
      <tr>
        <td>Before Lunch</td>
        <td>This col will be wider than the others because it has lots of content...</td>
        <td></td>
        <td></td>
        <td></td>
        <td>But I would really like them to always be the same size!</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>

    <style type="text/css">

        table {
            width: 100%;
        }        

        td, th {
            border:1px solid black;
        }   

        th {
            font-weight:bold;            
            background:red;
        }

        .row_header {
            width:50px;
            background:#ccc;
        }

        .weekend {
            width:100px;
            background:#ccc;
        }

        td,
        th        {
            overflow:hidden;
        }
    .fluid {

}
.weekend,
.row_header{
width:50px !important;

}

table{
    border: 1px solid black;
    table-layout: fixed;
    width:100%;

}
    </style>​

Apc

Best answer, using only CSS and no jQuery. – Sporulate

Answer 3

Could you possibly do:

.fluid {
    width:10%;
} 

Micropaleontology

That doesn't seem to work for me. The width on .row_header and .weekend seem to be ignored and on small resolutions it still unevenly sizes the widths of the columns Sample Here – Blent

could you do media queries, then change the percentage appropriately? – Micropaleontology

How would that help? Can you please give me an example? – Blent

Answer 4

How about this using only CSS?

http://jsfiddle.net/T6YNK/16/

Interlace