0

我有一张带有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 工作，但不能让 overflow-x:auto 工作。有没有办法让 tr 更宽以使 tbody 左右滚动？如果是这样，怎么做？

4

1 回答 1

1

啊，我想通了。

我添加了浮动：左；和 display:block 到 tbody>tr。

CSS：

 #tableWrapper tbody>tr{
  display:block;
  float:left;
   width: 1200px; /*desired width*/ 
  }
于 2013-02-14T16:52:02.470 回答