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 {
        ???
    }

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. — Madara's Ghost, Jul 16 '12 at 15:42

kiranvj · Answer 1 · 2012-07-16T16:11:55.673

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>

Best answer, using only CSS and no jQuery. – Jeff B. Feb 13 '13 at 18:15 — Jeff B., Feb 13 '13 at 18:15

score 2 · Accepted Answer · answered Jul 16 '12 at 15:56

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);
        })
    });

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. — Danny, Jul 16 '12 at 16:04

score 1 · Answer 3 · edited Jul 16 '12 at 15:37

1

Could you possibly do:

.fluid {
    width:10%;
}

edited Jul 16 '12 at 15:37

Madara's Ghost

172,118
50
264
308

answered Jul 16 '12 at 15:25

ColWhi

1,077
6
16

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](http://i.imgur.com/gVZvV.png) – Danny Jul 16 '12 at 15:34
could you do media queries, then change the percentage appropriately? – ColWhi Jul 16 '12 at 15:35
How would that help? Can you please give me an example? – Danny Jul 16 '12 at 15:39

score 1 · Answer 4 · answered Jul 16 '12 at 15:57

1

How about this using only CSS?

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

answered Jul 16 '12 at 15:57

Billy Moat

20,792
7
45
37

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

4 Answers4