如果隐藏滚动条，则隐藏/收缩底部边框

Question

我有一张可滚动表，我可以将标头视为表滚动时可见。问题在于，Tbody的底部边界一直延伸到滚动条的末端。由于滚动条将在没有足够数据的情况下隐藏，因此仅将边框延伸到列的几个像素上。

我要么如何制作这个边界，就像tbody中的圆柱一样长，或者在滚动栏躲藏时收缩？我尝试将滚动滚动到桌子上方，但这会导致标头不冻结，所以我做不到。我还将边界移至不同的元素，但它们的大小相同。我可以添加此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帖子中发布此解决方案：如何检查是否可见卷轴？

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

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

Answer 2

这必须是Firefox的问题。请参阅下面的链接，如果您的问题类似：https://bugzilla.mozilla.org/show_bug.cgi?id=135236

，但我也发现了以下链接：http://bobcravens.com/2010/01/html-scrolling-table-with-fixed-headers-jquery-plugin/

这是工作示例：

colWidth = $bodyCells.map(function() {
        return $(this).width();
    }).get();
    // Set the width of thead columns
    $table.find('thead tr').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });   

http://jsfiddle.net/hashem/crspu/554/

最后，我将删除tbody边框，并将边框底部分配到桌子本身，或者您也可以尝试使用float：左至thead和tbody。