对于纯CSS方法，你需要一个带有overflow-y: auto;并决定如何隐藏滚动/溢出行:

覆盖一个不透明的粘头(位置:粘;上图:0;z-index: 1;)，就像@RokoCBuljan的答案一样。 切换行可见性(通过如下所示在属性后设置tr:)。

注意容器可以是一个外部<div>，或者<table>本身，或者它的一部分(例如<tbody>)。后面两个你需要设置display: block;所以实际上他们被当成了潜水者。

请看下面一个修改后的@giulio的解决方案:

:root { --height-height: 150px; /* cell width has to reserve some space for scrolling. Hence the sum < 100% */ --cell-width: 85px; } .header-fixed { width: 200px; } /* Treat all as divs */ .header-fixed > thead, .header-fixed > tbody, .header-fixed > thead > tr, .header-fixed > tbody > tr, .header-fixed > thead > tr > th, .header-fixed > tbody > tr > td { display: block; } /* Prevent header to wrap */ .header-fixed > thead > tr > th { white-space: nowrap; background-color: lightgrey; } .header-fixed > tbody > tr:after, .header-fixed > thead > tr:after { content: ' '; display: block; visibility: hidden; clear: both; } .header-fixed > tbody { overflow-y: auto; height: var(--height-height); } .header-fixed > tbody > tr > td, .header-fixed > thead > tr > th { width: var(--cell-width); border: thin solid grey; float: left; } <table class="header-fixed"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>cell 11</td> <td>cell 12</td> </tr> <tr> <td>cell 21</td> <td>cell 22</td> </tr> <tr> <td>cell 31</td> <td>cell 32</td> </tr> <tr> <td>cell 41</td> <td>cell 42</td> </tr> <tr> <td>cell 51</td> <td>cell 52</td> </tr> <tr> <td>cell 61</td> <td>cell 62</td> </tr> <tr> <td>cell 71</td> <td>cell 72</td> </tr> <tr> <td>cell 81</td> <td>cell 82</td> </tr> <tr> <td>cell 91</td> <td>cell 92</td> </tr> </tbody> </table>

注意:如果你有>2列，你需要相应地摆弄var(——cell-width)变量。

迟到的派对(我的生活的故事)，但由于这是谷歌上的第一个结果，上面没有一个让我工作，下面是我的代码

/*Set a min width where your table start to look like crap*/
table { min-width: 600px; }

/*The next 3 sections make the magic happen*/
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

tbody {
    display: block;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*Use the following to make sure cols align correctly*/
table, tr, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}


/*Set your columns to where you want them to be, skip the one that you can have resize to any width*/
    th:nth-child(1), td:nth-child(1) {
    width: 85px;
}
th:nth-child(2), td:nth-child(2) {
    width: 150px;
}
th:nth-child(4), td:nth-child(4) {
    width: 125px;
}
th:nth-child(5) {
    width: 102px;
}
td:nth-child(5) {
    width: 85px;
}

使用这个链接，stackoverflow.com/a/17380697/1725764，由Hashem Qolami在原始帖子的评论和使用display:内联块，而不是浮动。 如果表也有'table-bordered'类，则修复边界。

table.scroll {
  width: 100%;  
  &.table-bordered {
    td, th {
      border-top: 0;
      border-right: 0;
    }    
    th {
      border-bottom-width: 1px;
    }
    td:first-child,
    th:first-child {
      border-right: 0;
      border-left: 0;
    }
  }
  tbody {
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;  
  }
  tbody, thead {
    display: block;
  }
  tr {
    width: 100%;
    display: block;
  }
  th, td {
    display: inline-block;

  }
  td {
    height: 46px; //depends on your site
  }
}

然后把td和th的宽度相加

table.table-prep {
  tr > td.type,
  tr > th.type{
    width: 10%;
  }
  tr > td.name,
  tr > th.name,
  tr > td.notes,
  tr > th.notes,
  tr > td.quantity,
  tr > th.quantity{
    width: 30%;
  }
}

不管它现在有什么价值:我确实发布了一个解决方案的姐妹线程表滚动与HTML和CSS

接受两个表(一个仅用于头部，一个用于所有-由浏览器布局) 摆放完毕后，将上桌(仅限人头)调整到下桌的宽度 隐藏(可见性，而不是显示)下表的标题，并使下表在div中可滚动w/

解决方案是不可知的任何风格/框架使用-所以它可能在这里也是有用的…

一个很长的描述是在表格滚动与HTML和CSS /代码也是在这支笔:https://codepen.io/sebredhh/pen/QmJvKy

table { overflow-y: auto; height: 50vh; /* !!! HEIGHT MUST BE IN [ vh ] !!! */ } thead th { background-color: white; position: sticky; top: 0; } <table> <thead> <tr><th>TH 1</th><th>TH 2</th></tr> </thead> <tbody> <tr><td>A1</td><td>A2</td></tr> <tr><td>B1</td><td>B2</td></tr> <tr><td>C1</td><td>C2</td></tr> <tr><td>D1</td><td>D2</td></tr> <tr><td>E1</td><td>E2</td></tr> <tr><td>F1</td><td>F2</td></tr> <tr><td>G1</td><td>G2</td></tr> <tr><td>H1</td><td>H2</td></tr> <tr><td>I1</td><td>I2</td></tr> <tr><td>J1</td><td>J2</td></tr> <tr><td>K1</td><td>K2</td></tr> <tr><td>L1</td><td>L2</td></tr> <tr><td>M1</td><td>M2</td></tr> <tr><td>N1</td><td>N2</td></tr> <tr><td>O1</td><td>O2</td></tr> <tr><td>P1</td><td>P2</td></tr> <tr><td>Q1</td><td>Q2</td></tr> <tr><td>R1</td><td>R2</td></tr> <tr><td>S1</td><td>S2</td></tr> <tr><td>T1</td><td>T2</td></tr> <tr><td>U1</td><td>U2</td></tr> <tr><td>V1</td><td>V2</td></tr> <tr><td>W1</td><td>W2</td></tr> <tr><td>X1</td><td>X2</td></tr> <tr><td>Y1</td><td>Y2</td></tr> <tr><td>Z1</td><td>Z2</td></tr> </tbody> </table>

你不需要js。重要的是设置表格高度[vh]

不需要用div包装它…

CSS:

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}

table{
 height:300px;              // <-- Select the height of the table
 display: block;
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

Bootply: https://www.codeply.com/p/nkaQFc713a