javascript - 修复显示问题 : block in table to match thead and tbody width

Question

这是我的代码:

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

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
   }