為表“ 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溢出-y：auto起作用，但不能溢出-x：auto。 有沒有辦法使tr變寬以使tbody左右滾動？ 如果是這樣，怎么辦？

Answer 1

我知道了。

我添加了float：left; 並顯示：阻止到tbody> tr。

CSS：

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