CODEWITHSUNDEEP
htmlcsshtml-tablefluid
Danny
Danny

Reputation: 183

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

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

Upvotes: 8

Views: 15020

Answers (4)

kiranvj
kiranvj

Reputation: 34107

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>​

Upvotes: 10

Billy Moat
Billy Moat

Reputation: 21050

How about this using only CSS?

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

Upvotes: 1

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174957

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

Upvotes: 2

ColWhi
ColWhi

Reputation: 1077

Could you possibly do:

.fluid {
    width:10%;
}

Upvotes: 1

Related Questions