生產表'tbody'的水平滾動條

Question

我有一個傳統的表，包括thead，tbody等。這對tablesorter.js是必需的。

我有什麼：

<div id="tableWrapper"> 
    <div id="tableContainer" class="tableContainer"> 
    <table id="scrollTable"> 

     <thead class="fixedHeader"> 
     <tr class="tableHeader even"> 
      <th class="header"> 
      <span>Name</span> 
      </th> 
      <th class="header"> 
      <span>Address</span> 
      </th> 
     </tr> 
     </thead> 
     <tbody class="scrollContent"> 
     <tr class="tableRow"> 
      <td class="td_0"> 
      <span> 
       Doe, John 
      </span> 
      </td> 
      <td class="td_0"> 
      <span> 
       Memory Lane 
      </span> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</div> 

CSS：

#tableWrapper tbody{ 
    color:#00467f; 
    font-weight:500; 
    position:absolute; 
    overflow-y: auto; 
    overflow-x: scroll; 
    height:300px; 
    width:300px; 
} 

#tableWrapper #tableContainer{ 
    width: 1100px; 
    overflow: hidden; 
} 

#tableWrapper tbody>tr{ 
    width: 1200px; 
} 

我保持表頭部分垂直固定，所以tbody的位置是絕對的，保持表頭的TBODY垂直滾動事件外。我嘗試將tbody> tr的寬度設置爲高於tbody的值，但沒有運氣。

tbody> tr的寬度會自動縮小到tbody的大小。

問題：無法水平滾動整個表格（因此垂直滾動條會消失到溢出中：隱藏），我無法讓tbody水平滾動條滾動。我想只是橫向滾動tbody，然後我有一些jQuery將該事件綁定到標題。所以沒有問題。只是試圖讓水平滾動條只滾動tbody。

我能夠得到tbody overflow-y：auto來工作，但不能溢出-x：auto。有沒有辦法讓tr變得更寬以讓tbody左右滾動？如果是這樣，怎麼樣？

Answer 1

啊我想通了。

我加了float：left;並顯示：block to the tbody> tr。

CSS：

#tableWrapper tbody>tr{ 
    display:block; 
    float:left; 
    width: 1200px; /*desired width*/ 
    }