为表格生成水平滚动'tbody'-Java 学习之路

我有一个传统的 table ，包括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向左和向右滚动？如果是这样，怎么样？

1 回答

1
啊我明白了 .

我添加了float：left;并显示：阻止到tbody> tr .

CSS：
```
#tableWrapper tbody>tr{
  display:block;
  float:left;
   width: 1200px; /*desired width*/ 
  }
```
回复于 2024-04-29T03:02:42+08:00

为表格生成水平滚动'tbody'

1 回答

相关问题