修复显示问题：表格中的块以匹配thead和tbody宽度

Question

以下是我的代码：

JSFiddle代码在这里。问题出在css中使用display：block

tbody.scrollContent 
{
     **display: block;**

height: 262px;
overflow: auto;
width: 756px;
}

但我需要使用它来获取滚动条，如图所示。但是当我通过左键单击标题上的垂直条来调整标题大小，然后向左或向右滚动thead和tbody不匹配。如果我删除display：block然后一切正常但我丢失了我的垂直滚动条。我使用jquery ui resizable插件尝试解决问题，当我在thead单元格和tbody单元格上执行console.log时，它们是相同的。 我读过其他一些帖子，但似乎无法真正让它与我合作。任何帮助将不胜感激。

更新 - 2014年1月31日
我的最终解决方案是获取我的代码，然后将thead和tbody分成两个不同的表。我做的是创建两个表。第一个是thead，第二个是tbody。这样我仍然可以只在tbody上保持滚动条的功能。只是使thead宽度增加了16px，因此它在滚动条上方展开。我这样做是因为表布局的问题：修复并打破了thead和tbody对齐。感谢别人指出的帮助。

Answer 1

以下是一个可能适合您的解决方案：

CSS： EXAMPLE FIDDLE

  tbody.scrollContent {
  //display: block; <- remove this entry

    height: 262px;
    overflow: auto;
    width: 756px;
  }

  div.scrollContainer {
    // existing styles
    overflow-y: scroll; //<-add this
    overflow-x: hidden; //<- and this
   }