Question

我有一张包含thead和tbody的表格。 thead的表格是＆＃34;已修复＆＃34;，但div包含带有tbody滚动的表格。问题是我找不到一致的方法来处理滚动条。例如，如果用户（通过其系统设置）设置为始终显示滚动条，则tbody内的列将被推向左侧。如果他们的滚动条设置为仅在滚动时显示，那么它看起来很好。

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

<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>

CSS：

.this_is_fixed {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
} 

.scroll_container {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
}   

.scroll {
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

.my_table thead tr th {
     width: 33.33333%   
}

.my_table tbody tr td {
     width: 33.33333%   
}

如果用户将滚动条设置为始终显示，则.scroll内的表格会向左移动，但如果将滚动条设置为仅在滚动时显示滚动条，则表格很好。我是否有一致的方法来处理这个问题（跨浏览器）？我不想要涉及隐藏滚动条的解决方案。提前感谢任何解决方案！

Answer 1

解决方案＃1：避免滚动条宽度

的影响

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

html {
    width: 100vw;
}

解决方案＃2：始终显示滚动条

这是一种广泛使用的方法来始终显示滚动条。

html {
    overflow-y: scroll;
}

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

html {
    height: 101%;
}

示例 - 始终显示滚动条：

＆＃13;

html {
    height: 101%;
}
.this_is_fixed {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
} 

.scroll_container {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
}   

.scroll {
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

.my_table thead tr th {
     width: 33.33333%   
}

.my_table tbody tr td {
     width: 33.33333%   
}

＆＃13;

<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>

＆＃13;

Answer 2

在一般意义上，这个问题经常出现。例如，当使用全屏叠加层隐藏模态对话框后面的内容时。我们可能会将页面设置为隐藏溢出以匹配叠加大小，并防止滚动干扰所需的外观。结果，当所有内容发生变化时，那里的滚动条突然消失，屏幕“跳跃”。

与Bootstrap解决问题的方式一样，最强大的解决方案是使用JS和虚拟/隐藏div测量滚动条宽度，如果将useragent配置为显示它们，它将始终增加其大小以包括滚动条。然后你可以调整你的边距等来计算那个宽度（你还需要确定内容是否溢出了它的容器，否则你将调整一个不在那里的滚动条。）很容易带一些额外的JS，但您必须在窗口调整大小或表格内容发生变化时重新检查。

无论如何，借用https://github.com/stempler/bootstrap

中的一些代码

.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;
}

可能有一个更简单的解决方案，涉及创造性的CSS，以强制所有对齐，但我现在没有看到它，因为你有一切相对位于绝对容器内。这个答案或多或少只是解决了“当滚动条出现时我不想让事情发生变化”的一般问题。

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

2 个答案:

解决方案＃1：避免滚动条宽度

解决方案＃2：始终显示滚动条