Javascript 为表格'生成水平滚动条；t车身'；

我有一个带有ad、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>

我将保持表格标题部分垂直固定，因此tbody位置是绝对的，以便将表格标题保持在tbody垂直滚动事件之外。我尝试将tbody>tr的宽度设置为高于tbody的某个值，但没有成功

tbody>tr宽度会自动缩小到tbody的大小

问题：在不水平滚动整个表的情况下，我无法让tbody水平滚动条滚动（因此垂直滚动条将消失在溢出：隐藏中）。我只想水平滚动tbody，然后使用jquery将该事件绑定到标题。所以没有问题。只是想让水平滚动条只为tbody滚动

我可以让tbody overflow-y:auto正常工作，但不能让overflow-x:auto正常工作。有没有办法使tr变宽以使tbody左右滚动？如果是，怎么做？

啊，我想出来了

我加了float:left；和显示：块到tbody>tr

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;
}

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