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显示和隐藏边框。

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边框并为表格本身指定一个border-bottom或者你也可以尝试使用Float：left to the the the and the body。

如果隐藏滚动条，则隐藏/缩小桌面上的下边框

2 个答案: