如何：100％高度表仅滚动tbody-Java 学习之路

是否可以使用CSS滚动100％高度表的内容而不是 Headers ，只显示tbody内容侧面的滚动条而不是 Headers 行？谢谢！

9 回答

-1

表格很棘手 . 我想你想将它们用于语义和后备目的，但它们有点不灵活 .

幸运的是，有些人已经想出了不是一个，而是实现可滚动效果的两种好方法....在〜2005年 .

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

他们仍然需要额外的html标记才能使它成为可能而第二个表有效地使用嵌套表，但是fallback / plain HTML看起来像普通的普通表 .

Method #1

外部div用填充，为元素创建'field' . 内部div使内部表可滚动 . thead 表格行绝对定位，使其保持在正文的顶部，与页脚相同 . 因为内部div是 overflow: auto 并且定义了高度，所以表行的其余部分在可分辨区域中内嵌 .

Method #2

外表是普通表，页眉和页脚正常设置样式 . 但是外表的tbody只包含一行，一列，并且在其中有另一个表 . 此列具有已定义的高度和 overflow: auto ，因此其中的内容（仅包含内容）将在其中滚动 .

回复于 2024-05-11T23:12:44+08:00
0

一个JavaScript解决方案是使用'浮动 Headers ' . 你把整个表放在一个带有溢出集的div中，然后JavaScript将克隆表头并将它放在div的顶部，有点像Apple接口 .

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

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

回复于 2024-05-11T23:12:44+08:00
3
我希望现在还为时不晚，你还活着，从那时起事情有了很大改善:)

您可以使用：
```
table {
  display: inline-grid;
  grid-template-areas: 
  "head-fixed" 
  "body-scrollable";
}

thead {
  grid-area: head-fixed;
}

tbody {
  grid-area: body-scrollable;
  overflow: auto;
  height: calc(100vh - 55px);
}
```
JSFiddle上具有100％高度和固定 Headers 的可滚动表（tbody）：http://jsfiddle.net/gengns/p3fzdc5f/
回复于 2024-05-11T23:12:44+08:00
0

据我所知，纯CSS不可能（至少不是跨浏览器）但使用jQuery插件它是可能的，非常简单，例如jQuery.FixedTable .

回复于 2024-05-11T23:12:44+08:00

您可以使用flex显示进行操作 . 无需硬编码尺寸 .

Here是一个如何在表格中使用固定 Headers 和可滚动内容的示例 . 码：

<html style="height: 100%">
  <head>
    <meta charset=utf-8 />
    <title>Fixed Header in table</title>
    <!-- Reset browser defaults -->
    <link rel="stylesheet" href="reset.css">
  </head>
  <body style="height: 100%">
  <table style="display: flex; height: 100%; flex-direction: column">
    <thead>
      <tr>
        <td>HEADER
------------</td>
      </tr>
    </thead>
    <tbody style="flex: 1; overflow: auto">
        <tr>
          <td>
          <div>
              CONTENT - START

              <script>
              for (var i=0 ; i<1000 ; ++i) {
                document.write(" Very long content!");
              }
              </script>
              
CONTENT - END
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  </body>
</html>

对于完整的Holy Grail实现（页眉，页脚，导航，侧面和内容），使用弹性显示，转到here .

回复于 2024-05-11T23:12:44+08:00

1
如果可能，在您的场景中，一个简单的直接替代方法是将 Headers 放在一个单独的div中，并将表放在另一个具有apt高度的div中，并将以下属性应用于div .
```
overflow-x: hidden;
overflow-y: scroll;
```
回复于 2024-05-11T23:12:44+08:00

垫很简单 . 这是你想要做的

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>

回复于 2024-05-11T23:12:44+08:00

我有一个类似的问题，只有 Headers 下的内容滚动并保持在剩余高度的100％ . 这是我的修复：

http://jsfiddle.net/ajkochanowicz/YDjsE/

这适用于更简单的用例 .

#container {
  border: 1px solid red;
  width: 200px;
  height: 250px; /* This can be any height and everything fills in */
  padding-top: 55px;            
}
#something-else {
  height: 55px;
  width: 200px;
  background-color: green;
  margin-top:-55px;    
}
#overflow {
  border: 1px solid blue;
  width:198px;
  overflow-y: auto; 
  height: 100%;   
}

回复于 2024-05-11T23:12:44+08:00

试试这个CSS文件：

table{
    width: 100%;
    height: 400px;
    background-color: #aaa;
  }

  tbody{
     background-color: #CCCCCC;
    display: block;
    height: 400px;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
  }

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

thead {
    display: block;
    height: 30px;
    width: 100%;
}

在我的Firefox中工作..没有在其他任何地方测试.. :)

回复于 2024-05-11T23:12:44+08:00

如何：100％高度表仅滚动tbody

9 回答

相关问题