如果隱藏滾動條，隱藏/縮小表格底部邊框

我有一個可滾動的表格，在表格滾動時我可以看到標題。問題在於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

如果隱藏滾動條，隱藏/縮小表格底部邊框

回答

相關問題