HTML 可滚动表头和正文对齐

Question

我花了很多时间和精力来玩弄和研究这个，但我不知道如何在 HTML 中将列标题与可滚动的表体完美对齐。这里和网络上随机发布了其他解决方案和技术，但它们都产生了不一致的结果，尤其是在随机数据量的情况下。

这是 JSFiddle .

请注意，我应用了自定义 CSS，还有 Bootstrap 的 CSS。请将结果面板扩展到足以让 HTML header 不换行。

为了总结 HTML，有两个表 - 一个用于列标题，一个用于数据单元格。每个都包裹在 <div> 中，它允许单元格滚动并设置列的宽度。考虑到滚动条有时会​​出现(数据是动态的，我不知道会有多少数据)，<div>表格单元格周围的包装器设置为始终显示滚动条，表格标题周围的包装器应用了以下 CSS:

.grid-container .column-wrapper {
    width: calc(100% - 16px); /* 16px is the approximate width of the scroll bar */
}

当缩放为 100% 时，这在我的显示器上有效，但在其他显示器上，网格线没有完美对齐 - 可能偏离 4 像素。使用这些网格的应用程序广泛使用它们，其中一些完美对齐，而另一些则关闭。不幸的是，我还没有找到正确渲染和不正确渲染的模式。

我不想要 JavaScript 解决方案 - 这些网格已经应用了很多 JavaScript 来使它们具有交互性，有时会呈现大量数据(超过 7,000 行)，我不想做一些时髦的事情，比如循环遍历每行，检测宽度，然后应用修复。

谢谢大家，如果您需要更多信息，请告诉我。

编辑-------------------------------------------- ----------------------------------------

我们的用户使用 Chrome 35.0.1916.153，我已经开始明确设置滚动条的宽度以确保它是 16px:

::-webkit-scrollbar {
    width: 16px;
    border: 1px solid #ccc;
}

同样，这在我的显示器上有效，但目前我无法告诉其他人的结果。这是更新的 JSFiddle .

Answer 1

这是我的解决方案，用于实现表头和可滚动表体之间的列的完美对齐。 我们不知道确切的滚动条宽度，所以:

1. 我们使表头可滚动，这样它的宽度现在与表体的宽度完全相同

   table.scrollable thead {
     width:100%;
     overflow-y: scroll;
     position: relative; /* for the absolute positioning of 2.*/
   }
   

2. 我们将 header 滚动箭头屏蔽在 2 个 pad 下

   table.scrollable thead:before {
     position: absolute;
     right: 0;
     width: 16px; height: 20px; content: ''; background-color: menu;
     margin-top: 0em;
   }
   table.scrollable thead:after{
     position: absolute;
     right: 0;
     width: 16px; height: 20px; content: ''; background-color: menu;
     margin-top: -1.2em;
   }
   

这是一个使用 flex css 的 fiddle 示例:https://jsfiddle.net/vyp5j257/2/

或者在这里更新您的 fiddle :http://jsfiddle.net/9g6xo8L6/1/