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行）而且我不想做像循环这样的时髦的事情通过每一行，检测宽度，然后应用修复。

谢谢大家，如果您需要更多信息，请与我们联系。

EDIT ---------------------------------------------- ---------------------------------------

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

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

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

Answer 1

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

calc（）可以通过跨浏览器测试进行。尝试将.grid-container .column-wrapper样式更改为以下内容：

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

Answer 2

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

我们使表头可滚动，使其宽度现在与正文

完全相同

table.scrollable thead {
  width:100%;
  overflow-y: scroll;
  position: relative; /* for the absolute positioning of 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/

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

2 个答案: