Html 如何使用可滚动的tbody一致地处理表格中的垂直滚动条？

我有一个带有

thead

和

tbody

的表。带有

thead

的表格是“固定的”，但包含带有

tbody

的表格的

div

会滚动。问题是我找不到一致的方法来处理滚动条。例如，如果用户（通过其系统设置）将滚动条设置为“始终显示”，则

t正文

中的列将被推到左侧。如果他们将滚动条设置为仅在滚动条上显示，则看起来不错

以下是我尝试做的一个简化版本：

<div class="this_is_fixed">
    <table class="my_table">
        <thead>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </thead>
    </table>
</div>
<div class="scroll_container">
    <div class="scroll">
        <table class="my_table">
            <tbody>
                <tr>
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

如果用户将滚动条设置为“始终显示”，则

.scroll

中的表格将向左移动，但如果用户将滚动条设置为“仅在滚动时显示滚动条”，则可以。我是否有一致的方法来处理此问题（跨浏览器）？我不想要隐藏滚动条的解决方案。提前感谢您提供的任何解决方案

解决方案1：避免滚动条对宽度的影响 这是一个非常简单的解决方案，可以避免滚动条对页面宽度产生影响

html {
    width: 100vw;
}

解决方案2：始终显示滚动条 这是一种广泛使用的始终显示滚动条的方法

html {
    overflow-y: scroll;
}

要始终显示活动滚动条，请将高度设为101%

html {
    height: 101%;
}

示例-始终显示滚动条：

html{
身高：101%；
}
.这是固定的{
位置：绝对位置；
排名：0；
左：0；
右：0；
高度：40px；
} 
.滚动U容器{
位置：绝对位置；
顶部：40px；
左：0；
右：0；
底部：0；
}   
.卷轴{
溢出y：自动；
宽度：100%；
身高：100%；
}
.我的桌子在那边{
宽度：33.33333%
}
.my_table tbody tr td{
宽度：33.33333%
}

第1列
第2列
第3列
第1列
第2列
第3列

从一般意义上讲，这个问题经常出现。例如，当使用全屏覆盖来隐藏模式对话框后面的内容时。我们可以将页面设置为隐藏溢出以匹配覆盖大小，并防止滚动干扰所需的外观。结果，那里的滚动条突然消失，屏幕随着所有内容的移动而“跳跃”

正如Bootstrap解决问题的方法一样，最健壮的解决方案是使用JS和一个虚拟/隐藏div来测量滚动条的宽度，如果useragent配置为显示滚动条，则该虚拟/隐藏div将始终增加滚动条的大小以包括滚动条。然后，您可以调整边距等，以适应该宽度（您还需要确定内容是否溢出其容器，否则您将调整不存在的滚动条。）使用一些额外的JS非常简单，但您必须在窗口调整大小或表内容更改时重新检查

不管怎么说，借用一些代码

--

函数测量滚动条（）{
var scrollDiv=角度元素（“”）；
bodyEl.append（scrollDiv）；
var width=scrollDiv[0]。offsetWidth-scrollDiv[0]。clientWidth；
console.log（'measureScrollbar'，宽度）；
scrollDiv.remove（）；
返回宽度；
}

---

可能有一个更简单的解决方案，它涉及到创造性的CSS来强制所有内容对齐，但我现在没有看到它，因为所有内容都是相对放置在绝对容器中的。这个答案或多或少只是解决了“当滚动条出现时，我不希望东西移动”的一般问题。

好吧，这很简单。您的容器必须包括固定杆。在你的例子中，它在外面。

html {
    height: 101%;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

function measureScrollbar() {
  var scrollDiv = angular.element('<div class="'+MEASURE_SCROLLBAR_CLASS+'"></div>');
  bodyEl.append(scrollDiv);
  var width = scrollDiv[0].offsetWidth - scrollDiv[0].clientWidth;
  console.log('measureScrollbar', width);
  scrollDiv.remove();
  return width;
}