为表'tbody'生成水平滚动

我有一个与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水平滚动条滚动(因此垂直滚动条会消失在overflow:hidden中)。 我想只是横向滚动tbody,然后我有一些jQuery将该事件绑定到标题。 所以没有问题。 只是试图让水平滚动条只滚动tbody。

我能够让tbody overflow-y:auto工作,但不能溢出-x:auto。 有没有办法让tr变得更宽以让tbody左右滚动? 如果是这样,怎么样?


我知道了。

我加了float:left; 并显示:block to the tbody> tr。

CSS:

 #tableWrapper tbody>tr{
  display:block;
  float:left;
   width: 1200px; /*desired width*/ 
  }
链接地址: http://www.djcxy.com/p/88291.html

上一篇: Produce horizontal scroll for table 'tbody'

下一篇: Overflow: Scroll;