title: Issue with fix display: block in table to match thead and tbody width
body: <p>Here is what my code looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/JHpHt.jpg" alt="enter image description here"></p>
  
  <p>The <a href="http://jsfiddle.net/adviner/T6W3A/" rel="nofollow noreferrer">JSFiddle</a> code is here.  The problem is in the css using display: block</p>
  
  <pre><code>tbody.scrollContent 
  {
       **display: block;**
  
  height: 262px;
  overflow: auto;
  width: 756px;
  }
  </code></pre>
  
  <p>but i need to use this to get the scroll bar as shown.  But when i resize the headers by left clicking the vertical bar on the header and then scrolling left or right the thead and tbody doesnt match.  If i remove the display: block then everything works correctly but i lose my vertical scroll bar.  Im using jquery ui resizable plugin to try and resolve the issue and they when i do a console.log on both the thead cell and the tbody cell are the same. 
  Ive read some other post but cant seem to really get it to work with mine.  Any help would be appreciated.</p>
  
  <p><strong>Update - 1/31/2014</strong>
  <br/>
  My final solution was to take my code and just split the thead and tbody into two different tables. What i did was create two tables. The first one is just the thead and the second one is tbody.  That way i can still keep the functionality with the scroll bar only on the tbody.  And just made the thead width 16px longer so it expands over the scrollbar.  I did this because of the problem with table-layout: fixed and breaking the thead and tbody alignment. Thanks for the help others have pointed out.</p>