title: Fixed header scrollable table has mismatch between header and tbody
body: <p>You can see my html code in </p>
  
  <p><a href="http://jsfiddle.net/Lwz9x4av/" rel="nofollow">jsfiddle</a></p>
  
  <p>It provides a fixed header scrollable table. There is a slight mismatch between columns of thead and tbody. How can I fix that?</p>
  
  <p>I need the borders of columns of thead and tbody to be at the sam place.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="tableContainer" class="tableContainer" style="margin: 0 auto;"&gt;
      &lt;table class="scrollTable" cellpadding="0" cellspacing="0" width="100%" border="0"&gt;
          &lt;thead class="fixedHeader"&gt;
              &lt;tr class="alternateRow"&gt;
                  &lt;th&gt;File&lt;/th&gt;
                  &lt;th&gt;Line&lt;/th&gt;
                  &lt;th&gt;Function&lt;/th&gt;
                  &lt;th&gt;Value&lt;/th&gt;
                  &lt;th&gt;Message&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody class="scrollContent"&gt;
              &lt;tr class="alternateRow"&gt;
                  &lt;td&gt;test.cpp&lt;/td&gt;
                  &lt;td&gt;72&lt;/td&gt;
                  &lt;td&gt;remove_items_states&lt;/td&gt;
                  &lt;td&gt;0.000000&lt;/td&gt;
                  &lt;td&gt;state_flag&lt;/td&gt;
              &lt;/tr&gt;
                      &lt;tr class="alternateRow"&gt;
                  &lt;td&gt;test.cpp&lt;/td&gt;
                  &lt;td&gt;72&lt;/td&gt;
                  &lt;td&gt;remove_items_states&lt;/td&gt;
                  &lt;td&gt;0.159990&lt;/td&gt;
                  &lt;td&gt;state_flag&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="alternateRow"&gt;
                  &lt;td&gt;test.cpp&lt;/td&gt;
                  &lt;td&gt;72&lt;/td&gt;
                  &lt;td&gt;remove_items_states&lt;/td&gt;
                  &lt;td&gt;0.159990&lt;/td&gt;
                  &lt;td&gt;state_flag&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="alternateRow"&gt;
                  &lt;td&gt;test.cpp&lt;/td&gt;
                  &lt;td&gt;72&lt;/td&gt;
                  &lt;td&gt;remove_items_states&lt;/td&gt;
                  &lt;td&gt;0.160000&lt;/td&gt;
                  &lt;td&gt;state_flag&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="alternateRow"&gt;
                  &lt;td&gt;test.cpp&lt;/td&gt;
                  &lt;td&gt;72&lt;/td&gt;
                  &lt;td&gt;remove_items_states&lt;/td&gt;
                  &lt;td&gt;0.160000&lt;/td&gt;
                  &lt;td&gt;state_flag&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* Terence Ordona, portal[AT]imaputz[DOT]com         */
  /* http://creativecommons.org/licenses/by-sa/2.0/    */
  
  /* begin some basic styling here                     */
  body {
      background: #FFF;
      color: #000;
      font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
      margin: 10px;
      padding: 0
  }
  
  table, td, a {
      color: #000;
      font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
  }
  
  h1 {
      font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
      margin: 0 0 5px 0
  }
  
  h2 {
      font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
      margin: 0 0 5px 0
  }
  
  h3 {
      font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
      color: #008000;
      margin: 0 0 15px 0
  }
  /* end basic styling                                 */
  
  /* define height and width of scrollable area. Add 16px to width for scrollbar          */
  div.tableContainer {
      clear: both;
      border: 1px solid #963;
      height: 500px;
      overflow: auto;
      width: 756px
  }
  
  /* Reset overflow value to hidden for all non-IE browsers. */
  html&gt;body div.tableContainer {
      overflow: hidden;
      width: 756px
  }
  
  /* define width of table. IE browsers only                 */
  div.tableContainer table {
      float: left;
      width: 740px
  }
  
  /* define width of table. Add 16px to width for scrollbar.           */
  /* All other non-IE browsers.                                        */
  html&gt;body div.tableContainer table {
      width: 756px
  }
  
  /* set table header to a fixed position. WinIE 6.x only                                       */
  /* In WinIE 6.x, any element with a position property set to relative and is a child of       */
  /* an element that has an overflow property set, the relative value translates into fixed.    */
  /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
  thead.fixedHeader tr {
      position: relative
  }
  
  /* set THEAD element to have block level attributes. All other non-IE browsers            */
  /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
  html&gt;body thead.fixedHeader tr {
      display: block
  }
  
  /* make the TH elements pretty */
  thead.fixedHeader th {
      background: #C96;
      border-left: 1px solid #EB8;
      border-right: 1px solid #B74;
      border-top: 1px solid #EB8;
      font-weight: normal;
      padding: 4px 3px;
      text-align: left
  }
  
  /* make the A elements pretty. makes for nice clickable headers                */
  thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
      color: #FFF;
      display: block;
      text-decoration: none;
      width: 100%
  }
  
  /* make the A elements pretty. makes for nice clickable headers                */
  /* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
  thead.fixedHeader a:hover {
      color: #FFF;
      display: block;
      text-decoration: underline;
      width: 100%
  }
  
  /* define the table content to be scrollable                                              */
  /* set TBODY element to have block level attributes. All other non-IE browsers            */
  /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
  /* induced side effect is that child TDs no longer accept width: auto                     */
  html&gt;body tbody.scrollContent {
      display: block;
      height: 475px;
      overflow: auto;
      width: 100%
  }
  
  /* make TD elements pretty. Provide alternating classes for striping the table */
  /* http://www.alistapart.com/articles/zebratables/                             */
  tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
      background: #FFF;
      border-bottom: none;
      border-left: none;
      border-right: 1px solid #CCC;
      border-top: 1px solid #DDD;
      padding: 2px 3px 3px 4px
  }
  
  tbody.scrollContent tr.alternateRow td {
      background: #EEE;
      border-bottom: none;
      border-left: none;
      border-right: 1px solid #CCC;
      border-top: 1px solid #DDD;
      padding: 2px 3px 3px 4px
  }
  
  /* define width of TH elements: 1st, 2nd, and 3rd respectively.          */
  /* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
  /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
  html&gt;body thead.fixedHeader th {
      width: 200px
  }
  
  html&gt;body thead.fixedHeader th + th {
      width: 240px
  }
  
  html&gt;body thead.fixedHeader th + th + th {
      width: 316px
  }
  
  /* define width of TD elements: 1st, 2nd, and 3rd respectively.          */
  /* All other non-IE browsers.                                            */
  /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
  html&gt;body tbody.scrollContent td {
      width: 200px
  }
  
  html&gt;body tbody.scrollContent td + td {
      width: 240px
  }
  
  html&gt;body tbody.scrollContent td + td + td {
      width: 300px
  }
  </code></pre>