up vote 0 down vote favorite

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;
}
link|flag
94% accept rate
Is it a must that this has to be in a table? I cant seem to figure it out neither – Liam 1 hour ago
@Liam Yes it must be in a table. It works in all browsers except Internet Explorer 7, I hate that browser. – Richard Knop 1 hour ago
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...jsfiddle.net/YvNy5/11 – Liam 1 hour ago
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 19 mins ago

Know someone who can answer? Share a link to this question via email, twitter, or facebook.

Your Answer

 
or
required, but never shown

Browse other questions tagged or ask your own question.