如何：100％高度表僅滾動tbody

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

您可以使用flex顯示進行操作。 無需硬編碼尺寸。

這是一個如何在表中使用固定標題和可滾動內容的示例。 碼：

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

有關完整的聖杯實現（頁眉，頁腳，導航，側面和內容），使用彈性顯示，請轉到此處。

Answer 5

據我所知，純CSS不可能（至少不是跨瀏覽器），但使用jQuery插件它是可能的，非常簡單，例如jQuery.FixedTable 。

Answer 6

我有一個類似的問題，只有標題下的內容滾動並保持在剩余高度的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 7

如果可能在您的場景中，一個簡單的直接替代方法是將標題放在一個單獨的div中，並將表放在另一個具有apt高度的div中，並將以下屬性應用於div。

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

Answer 8

墊很簡單。 這是你想要做的

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 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 個解決方案

解決方案1
7 2012-04-09 13:29:06

解決方案2
3 2011-01-05 13:25:48

解決方案3
3 2018-06-01 19:06:06

解決方案4
1 2015-10-26 16:20:31

解決方案5
1 2010-12-26 14:55:50

解決方案6
0 2012-05-23 14:44:08

解決方案7
0 2010-12-26 14:54:26

解決方案8
0 2011-01-18 16:58:29

解決方案9
-1 2012-04-09 12:38:29

如何：100％高度表僅滾動tbody

問題描述

9 個解決方案

解決方案1 7 2012-04-09 13:29:06

解決方案2 3 2011-01-05 13:25:48

解決方案3 3 2018-06-01 19:06:06

解決方案4 1 2015-10-26 16:20:31

解決方案5 1 2010-12-26 14:55:50

解決方案6 0 2012-05-23 14:44:08

解決方案7 0 2010-12-26 14:54:26

解決方案8 0 2011-01-18 16:58:29

解決方案9 -1 2012-04-09 12:38:29

解決方案1
7 2012-04-09 13:29:06

解決方案2
3 2011-01-05 13:25:48

解決方案3
3 2018-06-01 19:06:06

解決方案4
1 2015-10-26 16:20:31

解決方案5
1 2010-12-26 14:55:50

解決方案6
0 2012-05-23 14:44:08

解決方案7
0 2010-12-26 14:54:26

解決方案8
0 2011-01-18 16:58:29

解決方案9
-1 2012-04-09 12:38:29