HTML 可滚动表格标题和正文对齐

Question

我花了很多时间和精力来玩弄和研究这个，但我无法弄清楚如何将列标题与 HTML 中的可滚动表格正文完美对齐。此处和网络上的随机位置还发布了其他解决方案和技术，但它们都产生了不一致的结果，尤其是随机数据量。

这是JSFiddle。

请注意，我应用了自定义 CSS，但也应用了 Bootstrap 的 CSS。请将结果面板展开到足够大，以使 HTML 标头不换行。

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

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

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

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

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

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

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

::-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. 我们将标题滚动箭头隐藏在 2 个焊盘下

   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 的小提琴示例：https://jsfiddle.net/vyp5j257/2/

或者在这里更新你的小提琴：http://jsfiddle.net/9g6xo8L6/1/

Answer 2

当您需要像素完美渲染时，

calc() 可能无法进行跨浏览器测试。尝试将 .grid-container .column-wrapper 样式更改为如下所示：

.grid-container .column-wrapper {
    width: 100%;
    padding-right: 16px;
}