Internet Explorer 7 table with fixed layout problem

Question

So I have a table with many columns and a fixed layout. First column of a table is 100px wide, others are all 6px wide. It displays correctly in Mozilla Firefox, Internet Explorer 8 and 9. But in IE7 the text in first column is wrapped after almost each word (even though the column is wide enough for the whole text to be on one line) and the column is about 2-3 times wider than it's supposed to be.

jsfiddle: http://jsfiddle.net/YvNy5/

Copy and paste this code to index.html and test it in Internet Explorer 7 and 8/9 and compare it to see the difference:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="sk">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="Content-Style-Type" content="text/css" >
<meta http-equiv="Content-Language" content="sk" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Test 2</title>

<style type="text/css">
#CalendarReservationsBody table.CalendarReservationsBodyTable, #CalendarHolidaysBody table.CalendarHolidaysBodyTable{
    width: 100%;
    border-spacing: 0px;
    border-collapse: collapse;
    background: #F9F5D7;
    border: 1px solid #000;
    table-layout: fixed;
}
#CalendarHolidaysBody table.CalendarHolidaysBodyTable{
    margin-top: 1em;
    width: 100%;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable th, #CalendarHolidaysBody table.CalendarHolidaysBodyTable th{
    text-align: left;
    font-weight: normal;
    padding: 0.1em 0.5em;
    border: 1px solid #000;
    width: 6px;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable td.borderLeft, #CalendarHolidaysBody table.CalendarHolidaysBodyTable td.borderLeft{
    border-left: 1px solid #000;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable td, #CalendarHolidaysBody table.CalendarHolidaysBodyTable td{
    border: 0px;
    border-bottom: 1px solid #000;
    padding: 0.1em 0.5em;
    width: 6px;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable td.wideRow, #CalendarReservationsBody table.CalendarReservationsBodyTable th.wideRow
,#CalendarHolidaysBody table.CalendarHolidaysBodyTable td.wideRow, #CalendarHolidaysBody table.CalendarHolidaysBodyTable th.wideRow{
    width: 100px;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable thead th, #CalendarHolidaysBody table.CalendarHolidaysBodyTable thead th{
    text-align: center;
    font-weight: bold;
    background-color: #6FA7D1;
    color: #FFF;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable th.corner, #CalendarHolidaysBody table.CalendarHolidaysBodyTable th.corner{
    text-align: left;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable td.highlighted, #CalendarHolidaysBody table.CalendarHolidaysBodyTable td.highlighted{
    background: #FFB856;
    text-align: center;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable td.highlighted:hover, #CalendarHolidaysBody table.CalendarHolidaysBodyTable td.highlighted:hover{
    background: #FF9000;
}
/* specialne pre tabulku - dovolenky */
#CalendarHolidaysBody table.CalendarHolidaysBodyTable th{
    width: 24px;
    padding: 0.1em 0;
}
#CalendarHolidaysBody table.CalendarHolidaysBodyTable td{
    width: 1px;
    padding: 0.1em 0;
}
</style>

</head>
<body>

<div id="CalendarReservationsBody">

<table class="CalendarReservationsBodyTable">
    <thead>     <tr>
            <th class="corner wideRow">Auto</th>            <th class="odd" colspan="4">0</th>          <th class="" colspan="4">1</th>         <th class="odd" colspan="4">2</th>          <th class="" colspan="4">3</th>         <th class="odd" colspan="4">4</th>          <th class="" colspan="4">5</th>         <th class="odd" colspan="4">6</th>          <th class="" colspan="4">7</th>         <th class="odd" colspan="4">8</th>          <th class="" colspan="4">9</th>         <th class="odd" colspan="4">10</th>         <th class="" colspan="4">11</th>            <th class="odd" colspan="4">12</th>         <th class="" colspan="4">13</th>            <th class="odd" colspan="4">14</th>         <th class="" colspan="4">15</th>            <th class="odd" colspan="4">16</th>         <th class="" colspan="4">17</th>            <th class="odd" colspan="4">18</th>         <th class="" colspan="4">19</th>            <th class="odd" colspan="4">20</th>         <th class="" colspan="4">21</th>            <th class="odd" colspan="4">22</th>         <th class="" colspan="4">23</th>        </tr>
    </thead>    <tbody>     <tr>
            <td class="alignRight wideRow">KE-260 FC - Octavia combi</td><td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td colspan="16" class="highlighted borderLeft" title="Richard Knop">
    Richard Knop
</td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td colspan="14" class="highlighted" title="Richard Knop">
    Richard Knop
</td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
        </tr>   </tbody>
</table>

</div>

</body>
</html>

I guess this style needs some tweaking:

#CalendarReservationsBody table.CalendarReservationsBodyTable td.wideRow, #CalendarReservationsBody table.CalendarReservationsBodyTable th.wideRow
,#CalendarHolidaysBody table.CalendarHolidaysBodyTable td.wideRow, #CalendarHolidaysBody table.CalendarHolidaysBodyTable th.wideRow{
    width: 100px;
}

Is it a must that this has to be in a table? I cant seem to figure it out neither — Liam, Jun 09 '11 at 07:48
@Liam Yes it must be in a table. It works in all browsers except Internet Explorer 7, I hate that browser. — Richard Knop, Jun 09 '11 at 08:17
I dont know how viable an option is, but if you use a percentile opposed to a px width on the widerow it seems to work...http://jsfiddle.net/YvNy5/11/ — Liam, Jun 09 '11 at 08:23
Well, I would rather have a fixed width. If there is no solution to this bug, I will have to use relative width instead. I will wait a little longer, maybe some people will have ideas how to solve this issue. — Richard Knop, Jun 09 '11 at 09:25

score 3 · Accepted Answer · edited May 23 '17 at 12:04

as per my answer here: Table with table-layout: fixed; and how to make one column wider

I did say that col elements would be a means to control the width of other columns too..

Your table is very precise, 1 x 100px wide column + (24 groups of 4) = 96 x 6px the total of this is, not including browser variations for rounding or borders is 676px.. you also made the padding in em's - but you have made the table 100% wide, for the browsers to know which of your columns to extend, and by how much, when table width is greater than those calculations as well as actually calculating and rounding a mixture of em and px, stably across browser is ermm asking a lot..

Using with the col element it is easier, and the table does indeed expand "in proportion" also it means the table will scroll rather than squash when the explicit width is wider than the window..

using the col method for column sizing means you do not set a size anywhere else. The Browser must hit those widths first, which is why they are at the top of the table, before it even has to start rendering the cells, and it mustn't then hit anything else which might throw it off count ;) (not easy in IE's case!)- and sorry but the catch is that even left/right padding on the cells will throw different browsers a loop - IE7 already needs a different cell width (I've put a hack in the CSS I think it's no more than browser rounding differences) and once padding is introduced it gets worse - I've added to my fiddle a compromise whereby only the first column has padding as the other text spanning the columns and being centered just might get off with not having any!

Working Example

in the jsfiddle, working in IE7, if you comment out the width of the master table you should see that the table becomes the proper dimension - the red bar underneath is the 676px guide I mention earlier) - but if you then narrow the window the table will squish, I don't know which behaviour you would want, I'm just pointing it out, you could of course go for the proper width and give the outer containing div a min-width so it never gets a chance to squish.. anyway..

(and sorry I took out the CSS this table didn't need to make it easier to read)

added:

**I'm aware that this is not working in webkit browsers, I'm looking into it..*

Update

Webkit browsers appear to have their own width calculation bug with colspan and because your table has no rows without a colspan somehwere the only solution I found was to add a blank row with 97 empty cells then hide the row, I put it first in source in a separate tbody ID to make it easy to hide and so the browsers hit that row first.. this helps the Webkit browsers as it can then use this row to calculate the individual cell widths before it has to go on and calculate a colspan.

The original jsfiddle has been updated, as this was the only change, no change to the method, for what it's worth I tried both the <col> width and <td> width method in Webkit but it suffered the wrong calculation of colspan no matter which way it was done..

score 0 · Answer 2 · answered Jun 10 '11 at 07:51

You should remove the widths on the td's, as they are defined on the th's

#CalendarReservationsBody table.CalendarReservationsBodyTable td, 
#CalendarHolidaysBody table.CalendarHolidaysBodyTable td{
    border: 0px;
    border-bottom: 1px solid #000;
    padding: 0.1em 0.5em;
    /* width: 6px; */
}

#CalendarHolidaysBody table.CalendarHolidaysBodyTable td{
    /* width: 1px; */
    padding: 0.1em 0;
}

Internet Explorer 7 table with fixed layout problem

2 Answers2

Working Example