Geek Answers Handbook

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

I am trying to create my own 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 the last two columns as a fixed width and have the remaining columns (Monday through Friday) so that the table always fills 100% of this parent.

The problem I am facing is that liquid TD automatically evaluates itself based on the amount of content in them, which means that when you drag tasks from one day to another, the column widths change. I would like it to be exactly the same size from Monday to Friday, regardless of content and without setting text overflow: hidden; (since tasks should always be visible)

i.e. I want the gray columns to be fixed in width and the red columns to be flowing but uniform from each other, regardless of the content inside them.

Edit: I am using jQuery for the drag and drop function, so the JavaScript solution will also be fine (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 { ??? }
+8
html css html-table fluid
source share
4 answers

Using jQuery (perhaps, perhaps, with regular JS, but I prefer it for such tasks):

(Note: I gave the table an identifier, so it will be easier to select, you can do without it with a short break)

  $(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); }) });
+2
source share

Danny

I think this is what you are looking for.

The riddle is here http://jsfiddle.net/T6YNK/22/

Checked in Chrome.

the 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>​
+10
source share

Could you do:

 .fluid { width:10%; }
+1
source share

How to use CSS only about this?

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

+1
source share

More articles:


All Articles