如何：100％身高表只滚动tbody

是否可以使用CSS滚动100％高度表的内容而不是页眉，并且只将滚动条显示在tbody内容的侧面而不是标题行？ 谢谢！

---

表是棘手的业务。 我想你想将它们用于语义和回退的目的，但它们有点不灵活。

幸运的是，有些人已经找到了不是一种，而是在2005年〜2种实现可滚动效果的好方法。

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

他们仍然需要额外的html标记才能实现，第二个表有效地使用嵌套表，但回退/纯HTML看起来像普通的普通表。

方法＃1

带有填充的外部div，为元素创建一个“字段”。 内部div使内部表可以滚动。 该thead表行绝对定位，使其留在机身顶部，同样与页脚完成。 因为内部div是overflow: auto和一个高度定义了其余的表格行在可缩放区域内嵌入。

方法＃2

外表是普通表，标题和页脚的格式通常是正常的。 但外表的tbody只包含一行，一列，并且在其中有另一个表。 这个列有一个高度定义和overflow: auto所以它的能力（只有内容）将在其中滚动。

---

JavaScript解决方案是使用'浮动标题'。 你把整个表格放在一个带有溢出设置的div中，然后JavaScript将克隆表头并把它放在div的顶部，有点像Apple界面。

一个jQuery示例是http://fixedheadertable.com/

请注意，如果您在表格中执行其他操作（例如客户端排序，过滤等），这会变得非常复杂。

---

垫子很简单。 这就是你想要做的

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/88287.html

上一篇: How To: 100% Height Table only Scroll tbody

下一篇: How to approximate table layout with css when structure is disjointed