How To: 100% Height Table only Scroll tbody

is it possible to scroll the content of a 100% height table and not the header using CSS and only showing the scroll bar to the side of the tbody content and not the header row? Thanks!

---

Tables are tricky business. I guess you want to use them for semantic and fallback purposes, but they're somewhat unflexible.

Luckily some already figured out not one, but 2 good methods of achieving scrollable effects.... in ~2005.

http://www.cssplay.co.uk/menu/tablescroll.html

They still need extra html markup to make it possible and the second table effectively uses a nested table, but the fallback / plain HTML looks like a normal plain table.

Method #1

Outer div with padding, to create a 'field' for the elements. Inner div which makes the inner table scrollable. The thead table row is absolutely positioned to make it stay on top of the body, same is done with the footer. Because the inner div is overflow: auto and a height defined the rest of the table rows fall inline in the scollable area.

Method #2

The outer table is a normal table, header and footer are styled normally. But the tbody of the outer table contains only one row, one column and in it it has another table. This column has a height defined and overflow: auto so the able in it (which only has the content) will be scrolled inside it.

---

A javascript solution is to use 'floating headers'. You put the whole table in a div with overflow set, then the JavaScript will clone the table header and put it at the top of the div, a bit like an Apple interface.

A jQuery example is http://fixedheadertable.com/

Note that this gets very complex if you're doing other things to the table, such as client-side sorting, filtering, etc.

---

Mat that is simple. Here's what you want to do

CSS:

<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }

  html, body{ width: 100%; height: 100%;}
  table{
    width: 100%;
    height: 100%;
    background-color: #aaa;
  }

  tbody{
    width: 100%;
    height: 100%;
    -display: block;
    background-color: #ccc;
    overflow-y: scroll;
    overflow-x: hidden;

  }

  td{
    width: 100px;
    height: 200px;
    background-color: #eee;
  }


</style>

HTML:

<table>

  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
     <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>

</table>

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

上一篇: 溢出：滚动;

下一篇: 如何：100％身高表只滚动tbody