title: scrolling tbody and header not lining up
body: <p>I have the following table and css and cannot get the header to line up correctly. My idea was to create a class for the TD and TH tags and set a fixed width there. This did not work for me though. Please see the code here:</p>
  
  <p><a href="http://jsfiddle.net/rc7g79Lt/" rel="nofollow">http://jsfiddle.net/rc7g79Lt/</a></p>
  
  <p>The css I have is as follows:</p>
  
  <pre><code>table#targetedAttacks
  {
      font-family: Arial, Sans-Serif;
      font-size: 12px;
      table-layout: fixed;
      width: 500px
  }
  tbody.scrollTbl {
      height: 250px;
      overflow: auto;
      border: 2px solid #000;
      background-color:#ccc;
      width: 525px;
  }
  
  table#targetedAttacks td {
      background-color:#fafafa;
      cursor: default;
      border-bottom: 1px solid #ccc;
      padding: 3px 10px;
  }
  tbody.scrollTbl td div {
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width:100px;
  }
  
  thead &gt; tr, tbody{
      display:block;
  }
  .date {
      width: 20%;
  }
  .subject {
      width: 20%;
  }
  .malwareName {
      width: 20%;
  }
  .malwareCat {
      width: 20%;
  }
  .reason {
      width: 10%;
  }
  .recipients {
      width: 10%;
  }
  
  table#targetedAttacks thead th
  {
      text-align: center;
      background-color: #ddd;
      cursor: pointer;
      padding: 5px;
  }
  </code></pre>