具有多個tbody元素的固定標題滾動表

我無法實現包含多個tbody元素的固定標題可滾動表。具有多個tbody元素的固定標題滾動表

基本上，我想在固定大小的容器元素內放一張表。然後，我想滾動任何溢出的表格元素，而不移動標題。

表需要與Twitter的引導來的風格，但我不知道這是相關的問題

希望是有道理的！

這裏是一個小提琴（顯然不完全如預期運行至今） https://jsfiddle.net/whbbwv7g/

，代碼：

<div id="tableContainer"> 
    <table class="table table-bordered table-hover"> 
     <thead> 
      <tr> 
       <th>Head 1</th> 
       <th>Head 2</th> 
       <th>Head 3</th> 
       <th>Head 4</th> 
      </tr> 
     </thead> 


      <tbody>    
       <tr> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td>     
       </tr> 
       <tr> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
       </tr> 
       <tr> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
       </tr> 
      </tbody> 
      <tbody>    
       <tr> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td>     
       </tr> 
       <tr> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
       </tr> 
       <tr> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
       </tr> 
      </tbody> 
      <tbody>    
       <tr> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td>     
       </tr> 
       <tr> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
       </tr> 
       <tr> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
        <td>Test</td> 
       </tr> 
      </tbody> 


    </table> 
</div>

唯一的CSS是：

#tableContainer { 
    width: 300px; 
    height:150px; 
}

來源

2016-03-14 Adrian Taylor

你試過堆疊在海誓山盟的頂部兩個表中一個div，並且只用了頂級表的TH元素 - 固定其位置，並設置溢出在底部桌上滾動。 '

' '' '' '

' '

' – Korgrue

您可以將您的標題和正文分成不同的表格。頂級表只會有標題，因爲您可以爲內容表分配可滾動的屬性。

一個工作小提琴： https://jsfiddle.net/psk11/mjxb6vcr/

<table> 
    <thead> 
    <tr> 
     <th>Column 1</th> 
     <th>Column 2</th> 
     <th>Column 3</th> 
    </tr> 
    </thead> 
</table 

<table style="height:300px;display:block;overflow-y:auto;"> 
    <tbody> 
    <tr> 
     <td> 
     Row 1 Col 1 
     </td> 
     <td> 
     Row 1 Col 2 
     </td> 
     <td> 
     Row 1 Col 3 
     </td> 
    </tr> 
    </tbody> 

    <tbody> 
    <tr> 
     <td> 
     Row 2 Col 1 
     </td> 
     <td> 
     Row 2 Col 2 
     </td> 
     <td> 
     Row 2 Col 3 
     </td> 
    </tr> 
    </tbody> 


</table>

來源

2017-07-24 12:51:06

具有多個tbody元素的固定標題滾動表

回答

相關問題