Question

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

Answer 1

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

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

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

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

方法＃1

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

方法＃2

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

Answer 2

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

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

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

Answer 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％高度和固定标头的可滚动表（tbody）： http://jsfiddle.net/gengns/p3fzdc5f/

Answer 4

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

Answer 5

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

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

<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<br/>------------</td>
      </tr>
    </thead>
    <tbody style="flex: 1; overflow: auto">
        <tr>
          <td>
          <div>
              CONTENT - START<br/>
              <script>
              for (var i=0 ; i<1000 ; ++i) {
                document.write(" Very long content!");
              }
              </script>
              <br/>CONTENT - END
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  </body>
</html>

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

Answer 6

如果可能在你的场景中，一个简单的直接替代方法是将标题放在一个单独的div中，并将表放在另一个具有apt height的div中，并将以下属性应用于div。

overflow-x: hidden;
overflow-y: scroll;

Answer 7

Mat很简单。这是你想要做的事情

<强> 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>

Answer 8

我遇到了类似的问题，只将标题下的内容滚动并保持在剩余高度的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%;   
}

Answer 9

试试这个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中工作..没有在其他任何地方测试.. :)

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

9 个答案: