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

Question

我的代码如下所示：

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

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

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

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

更新 - 2014 年 1 月 31 日
我的最终解决方案是使用我的代码并将 thead 和 tbody 拆分为两个不同的表。我所做的是创建两个表。第一个只是 thead，第二个是 tbody。这样我仍然可以只在 tbody 上保留滚动条的功能。并且只是使thead宽度增加了16px，以便它在滚动条上展开。我这样做是因为 table-layout 的问题：修复并破坏了 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
   }