Produce horizontal scroll for table 'tbody'

I have a traditional table with thead, tbody,etc. This is necessary for tablesorter.js.

What I have:

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

I am keeping the table header section vertically fixed, so tbody position is absolute to keep the table header outside the tbody vertical scroll event. I tried setting the width of the tbody>tr to something higher than the tbody but no luck.

The tbody>tr width automatically shrinks to the size of the tbody.

Problem: I can't get the tbody horizontal scrollbar to scroll without horizontally scrolling the entire table, (thus the vertical scrollbar would disappear into the overflow:hidden). I want to just scroll the tbody horizontally and then I have some jquery to bind that event to the header. So no issue there. Just trying to get the horizontal scrollbar to scroll for tbody only.

I am able to get the tbody overflow-y:auto to work, but not overflow-x:auto. Is there a way to make the tr wider to get the tbody to scroll left and right? If so, how?

---

Ah I figured it out.

I added float:left; and display:block to the tbody>tr.

CSS:

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

链接地址: http://www.djcxy.com/p/88292.html

上一篇: 在tbody中应用滚动并进行标题修复

下一篇: 为表'tbody'生成水平滚动