html - 如果隐藏滚动条，则隐藏/缩小表格的底部边框

Question

我有一个可滚动的表格，其中的标题在表格滚动时保持可见。问题是 tbody 底部的边框一直延伸到滚动条的末尾。由于当没有足够的数据时滚动条会隐藏，这只会让边框延伸超过列几个像素。

我怎样才能使这个边框与 tbody 中的列一样长，或者在滚动条隐藏时缩小？我试过将滚动条移动到表格上方的 div，但这会导致标题不卡住，所以我不能这样做。我也将边框移动到不同的元素，但它们的大小都相同。我可以向此 html 添加任何需要的内容。

如果表格不可滚动，另一种选择是完全隐藏底部边框，因为表格底部已经通过 CSS 设置了边框。

  <table id="driving" class="table2">
        <thead style="display: block">
            <tr>
                <th scope="col" id="unit" class="sort">
                    <a href="#">Unit</a>
                </th>
                <th id="startDateTime" class="sort">
                    <a href="#">StartDate</a>
                </th>
            </tr>
        </thead>
        <tbody style="max-height: 450px; overflow-y: auto; border-bottom: 1px #ccc solid; display: block">
            <tr>
                <td>
                    @item.UnitNumber
                </td>
                <td class="center">
                    @item.StartDateTime.Date
                </td>
            </tr>
        </tbody>
    </table>

Answer 1

我在另一篇 StackOverflow 帖子中发布后找到了一个解决方案: How can I check if a scrollbar is visible?

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);

这将允许我检查滚动条是否显示，然后通过 Javascript 显示和隐藏边框。