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

我有一个可滚动的表格，在表格滚动时我可以看到标题。问题在于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>

来源

2016-06-16 mameesh

一个解决方案，我发现我张贴这在另一个StackOverflow的职位后： How can I check if a scrollbar is visible?

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

这将让我检查滚动条显示，然后显示和隐藏通过Javascript边界。

来源

2016-06-16 14:45:15 mameesh

这必须是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：left to thead和TBODY。

来源

2016-06-16 14:46:29 prashmi

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

回答

相关问题