title: Internet Explorer 7 table with fixed layout problem
body: <p>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.</p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/YvNy5/" rel="nofollow">http://jsfiddle.net/YvNy5/</a></p>
  
  <p>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:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html lang="sk"&gt;
  &lt;head profile="http://www.w3.org/2005/10/profile"&gt;
  &lt;meta http-equiv="Content-Style-Type" content="text/css" &gt;
  &lt;meta http-equiv="Content-Language" content="sk" &gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" &gt;
  &lt;title&gt;Test 2&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  #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;
  }
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="CalendarReservationsBody"&gt;
  
  &lt;table class="CalendarReservationsBodyTable"&gt;
      &lt;thead&gt;     &lt;tr&gt;
              &lt;th class="corner wideRow"&gt;Auto&lt;/th&gt;            &lt;th class="odd" colspan="4"&gt;0&lt;/th&gt;          &lt;th class="" colspan="4"&gt;1&lt;/th&gt;         &lt;th class="odd" colspan="4"&gt;2&lt;/th&gt;          &lt;th class="" colspan="4"&gt;3&lt;/th&gt;         &lt;th class="odd" colspan="4"&gt;4&lt;/th&gt;          &lt;th class="" colspan="4"&gt;5&lt;/th&gt;         &lt;th class="odd" colspan="4"&gt;6&lt;/th&gt;          &lt;th class="" colspan="4"&gt;7&lt;/th&gt;         &lt;th class="odd" colspan="4"&gt;8&lt;/th&gt;          &lt;th class="" colspan="4"&gt;9&lt;/th&gt;         &lt;th class="odd" colspan="4"&gt;10&lt;/th&gt;         &lt;th class="" colspan="4"&gt;11&lt;/th&gt;            &lt;th class="odd" colspan="4"&gt;12&lt;/th&gt;         &lt;th class="" colspan="4"&gt;13&lt;/th&gt;            &lt;th class="odd" colspan="4"&gt;14&lt;/th&gt;         &lt;th class="" colspan="4"&gt;15&lt;/th&gt;            &lt;th class="odd" colspan="4"&gt;16&lt;/th&gt;         &lt;th class="" colspan="4"&gt;17&lt;/th&gt;            &lt;th class="odd" colspan="4"&gt;18&lt;/th&gt;         &lt;th class="" colspan="4"&gt;19&lt;/th&gt;            &lt;th class="odd" colspan="4"&gt;20&lt;/th&gt;         &lt;th class="" colspan="4"&gt;21&lt;/th&gt;            &lt;th class="odd" colspan="4"&gt;22&lt;/th&gt;         &lt;th class="" colspan="4"&gt;23&lt;/th&gt;        &lt;/tr&gt;
      &lt;/thead&gt;    &lt;tbody&gt;     &lt;tr&gt;
              &lt;td class="alignRight wideRow"&gt;KE-260 FC - Octavia combi&lt;/td&gt;&lt;td class=" borderLeft"&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=""&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=" borderLeft"&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=""&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=" borderLeft"&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=""&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=" borderLeft"&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=""&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=" borderLeft"&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=""&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=" borderLeft"&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=""&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=" borderLeft"&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=""&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=" borderLeft"&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=""&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td colspan="16" class="highlighted borderLeft" title="Richard Knop"&gt;
      Richard Knop
  &lt;/td&gt;
  &lt;td class=" borderLeft"&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=""&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=" borderLeft"&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=""&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=" borderLeft"&gt;&lt;/td&gt;
  &lt;td colspan="14" class="highlighted" title="Richard Knop"&gt;
      Richard Knop
  &lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=" borderLeft"&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=""&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=" borderLeft"&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=""&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=" borderLeft"&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=""&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=" borderLeft"&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=""&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=" borderLeft"&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=""&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=" borderLeft"&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
  &lt;td class=""&gt;&lt;/td&gt;
  &lt;td class="odd"&gt;&lt;/td&gt;
          &lt;/tr&gt;   &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I guess this style needs some tweaking:</p>
  
  <pre><code>#CalendarReservationsBody table.CalendarReservationsBodyTable td.wideRow, #CalendarReservationsBody table.CalendarReservationsBodyTable th.wideRow
  ,#CalendarHolidaysBody table.CalendarHolidaysBodyTable td.wideRow, #CalendarHolidaysBody table.CalendarHolidaysBodyTable th.wideRow{
      width: 100px;
  }
  </code></pre>