具有 100% 宽度的 HTML 表格，在 tbody 内具有垂直滚动

为了使 <tbody> 元素可滚动，我们需要更改它在页面上的显示方式，即使用 display: block; 将其显示为块级元素。

由于我们更改了 tbody 的 display 属性，我们也应该更改 thead 元素的该属性，以防止破坏表格布局。

所以我们有：

thead, tbody { display: block; }

tbody {
    height: 100px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

默认情况下，Web 浏览器将 thead 和 tbody 元素显示为 row-group（table-header-group 和 table-row-group）。

一旦我们改变它，内部的 tr 元素就不会填满它们容器的整个空间。

为了解决这个问题，我们必须计算 tbody 列的宽度并通过 JavaScript 将相应的值应用于 thead 列。

自动宽度列

这是上述逻辑的 jQuery 版本：

// Change the selector if needed
var $table = $('table'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
    return $(this).width();
}).get();

// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
    $(v).width(colWidth[i]);
});    

这是输出（在 Windows 7 Chrome 32 上）：

https://i.stack.imgur.com/WIbZe.jpg

WORKING DEMO。

全宽表，相对宽度列

根据原始海报的需要，我们可以将 table 扩展到其容器的 width 的 100%，然后对表的每一列使用相对 (Percentage) width。

table {
    width: 100%; /* Optional */
}

tbody td, thead th {
    width: 20%;  /* Optional */
}

由于表格具有（某种）流动布局，我们应该在容器调整大小时调整 thead 列的宽度。

因此，一旦调整窗口大小，我们应该设置列的宽度：

// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
    /* Same as before */ 
}).resize(); // Trigger the resize handler once the script runs

输出将是：

https://i.stack.imgur.com/In9jH.jpg

WORKING DEMO。

浏览器支持和替代品

我已经通过新版本的主要 Web 浏览器（包括 IE10+）在 Windows 7 上测试了上述两种方法，并且成功了。

但是，它 doesn't work properly on IE9 及以下。

这是因为在 table layout 中，所有元素都应遵循相同的结构属性。

通过将 display: block; 用于 <thead> 和 <tbody> 元素，我们破坏了表结构。

通过 JavaScript 重新设计布局

一种方法是重新设计（整个）表格布局。使用 JavaScript 动态创建新布局并动态处理和/或调整单元格的宽度/高度。

例如，看看下面的例子：

jQuery .floatThead() 插件（浮动/锁定/粘性表头插件）

jQuery 可滚动表格插件。 （github上的源代码）

jQuery .FixedHeaderTable() 插件（github上的源代码）

DataTables 垂直滚动示例。

嵌套表

这种方法使用两个嵌套表，其中包含一个 div。第一个 table 只有一个具有 div 的单元格，第二个表格放置在该 div 元素内。

在 CSS Play 中检查 Vertical scrolling tables。

这适用于大多数网络浏览器。我们也可以通过 JavaScript 动态地完成上述逻辑。

滚动时带有固定标题的表格

由于向 <tbody> 添加垂直滚动条的目的是在每一行的顶部显示表格 header，我们可以定位 thead 元素以保持 { 3} 在屏幕顶部。

以下是 Julien 执行的这种方法的 Working Demo。
它具有良好的网络浏览器支持。

here Willem Van Bockstal 的 pure CSS 实现。

纯 CSS 解决方案

这是旧答案。当然，我添加了一个新方法并改进了 CSS 声明。

固定宽度的表格

在这种情况下，table 应该有一个固定的 width（包括列宽和垂直滚动条的宽度之和）。

每个 列 应该有一个特定的 width 并且 thead 元素的 最后一列 需要更大的 width 等于到其他人的 width + 垂直滚动条的 width。

因此，CSS 将是：

table {
    width: 716px; /* 140px * 5 column + 16px scrollbar width */
    border-spacing: 0;
}

tbody, thead tr { display: block; }

tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody td, thead th {
    width: 140px;
}

thead th:last-child {
    width: 156px; /* 140px + 16px scrollbar width */
}

这是输出：

https://i.stack.imgur.com/jZfgJ.jpg

WORKING DEMO。

100% 宽度的表格

在这种方法中，table 的宽度为 100%，对于每个 th 和 td，width 属性的值应小于 100% / number of cols。

此外，我们需要将 thead 的 width 减小为垂直滚动条的 width 的值。

为此，我们需要使用 CSS3 calc() 函数，如下所示：

table {
    width: 100%;
    border-spacing: 0;
}

thead, tbody, tr, th, td { display: block; }

thead tr {
    /* fallback */
    width: 97%;
    /* minus scroll bar width */
    width: -webkit-calc(100% - 16px);
    width:    -moz-calc(100% - 16px);
    width:         calc(100% - 16px);
}

tr:after {  /* clearing float */
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody td, thead th {
    width: 19%;  /* 19% is less than (100% / 5 cols) = 20% */
    float: left;
}

这是 Online Demo。

注意：如果每列的内容都换行，这种方法会失败，即每个单元格的内容应该足够短。

下面是我在回答这个问题时创建的两个简单的纯 CSS 解决方案示例。

这是 jsFiddle Demo v2。

旧版本：jsFiddle Demo v1

---

在以下解决方案中，表格占据父容器的 100%，不需要绝对大小。它是纯 CSS，使用 flex 布局。

https://i.stack.imgur.com/vE5KO.png

可能的缺点：

垂直滚动条始终可见，无论是否需要；

表格布局是固定的 - 列不会根据内容宽度调整大小（您仍然可以明确设置您想要的任何列宽）；

有一个绝对大小——滚动条的宽度，对于我能够检查的浏览器来说，它大约是 0.9em。

HTML（缩短）：

<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>head1</th>
                <th>head2</th>
                <th>head3</th>
                <th>head4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            ...
        </tbody>
    </table>
</div>

CSS，为了清楚起见省略了一些装饰：

.table-container {
    height: 10em;
}
table {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}
table thead {
    /* head takes the height it requires, 
    and it's not scaled when table is resized */
    flex: 0 0 auto;
    width: calc(100% - 0.9em);
}
table tbody {
    /* body takes all the remaining available space */
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
}
table tbody tr {
    width: 100%;
}
table thead, table tbody tr {
    display: table;
    table-layout: fixed;
}

full code on jsfiddle

LESS 中的代码相同，因此您可以将其混入：

.table-scrollable() {
  @scrollbar-width: 0.9em;
  display: flex;
  flex-flow: column;

  thead,
  tbody tr {
    display: table;
    table-layout: fixed;
  }

  thead {
    flex: 0 0 auto;
    width: ~"calc(100% - @{scrollbar-width})";
  }

  tbody {
    display: block;
    flex: 1 1 auto;
    overflow-y: scroll;

    tr {
      width: 100%;
    }
  }
}

---

在现代浏览器中，您可以简单地使用 css：

th {
  position: sticky;
  top: 0;
  z-index: 2;
}

---

纯 CSS

适用于 Chrome、Firefox、Edge（和其他常青浏览器）

只需 position: sticky; top: 0; 您的 th 元素：

/* 修复表头 */ .tableFixHead { overflow: auto;高度：100px； } .tableFixHead th { 位置：粘性；顶部：0； } /* 只是普通的表格内容。 */ table { 边框折叠：折叠；宽度：100%； } th, td { 填充：8px 16px; } th { 背景：#eee; }

PS：如果您需要 TH 元素的 borders，th {box-shadow: 1px 1px 0 #000; border-top: 0;} 会有所帮助（因为默认边框在滚动时未正确绘制）。

对于上述仅使用一点 JS 以适应 IE11 的变体，请参阅此答案 Table fixed header and scrollable body

---

我将 display:block 用于 thead 和 tbody。因此，thead 列的宽度与 tbody 列的宽度不同。

table {
    margin:0 auto; 
    border-collapse:collapse;
}
thead {
    background:#CCCCCC;
    display:block
}
tbody {
    height:10em;overflow-y:scroll;
    display:block
}

为了解决这个问题，我使用了小的 jQuery 代码，但它只能在 JavaScript 中完成。

var colNumber=3 //number of table columns    

for (var i=0; i<colNumber; i++) {
  var thWidth=$("#myTable").find("th:eq("+i+")").width();
  var tdWidth=$("#myTable").find("td:eq("+i+")").width();      
  if (thWidth<tdWidth)                    
      $("#myTable").find("th:eq("+i+")").width(tdWidth);
  else
      $("#myTable").find("td:eq("+i+")").width(thWidth);           
}  

这是我的工作演示：http://jsfiddle.net/gavroche/N7LEF/

在 IE 8 中不起作用

var colNumber=3 // (var i=0; i

非常长的标题文本	普通标题	短
文本比标题短	文本更长比标题	精确
文本比标题短	文本比标题长	精确
文本比标题短	文本比标题长	精确
文本比标题短	文本比标题长	精确
文本比标题短	文本比标题长	精确
文本比标题短	文本比标题长	精确
文本比头部短er	文本长于标题	精确
文本短于标题	文本长于标题	精确
文本比标题短	文本比标题长	精确
文本比标题短	文本比标题长	精确
文本比标题短	文本比标题长	精确

---

依次创建两个表，将第二个表放在固定高度的 div 中，并将溢出属性设置为自动。还要将第二张桌子中的所有 td 保留为空。

<div>
    <table>
        <thead>
            <tr>
                <th>Head 1</th>
                <th>Head 2</th>
                <th>Head 3</th>
                <th>Head 4</th>
                <th>Head 5</th>
            </tr>
        </thead>
    </table>
</div>

<div style="max-height:500px;overflow:auto;">
    <table>
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        </tbody>
    </table>    
</div>

---

按照以下说明，我终于用纯 CSS 做对了：

http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/

第一步是将 <tbody> 设置为 display: 块，以便可以应用溢出和高度。从那里需要将 <thead> 中的行设置为 position: relative 和 display: block，以便它们位于现在可滚动的 <tbody> 之上。

tbody, thead { display: block; overflow-y: auto; }

因为 <thead> 是相对定位的，所以每个表格单元格都需要一个明确的宽度

td:nth-child(1), th:nth-child(1) { width: 100px; }
td:nth-child(2), th:nth-child(2) { width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }

但不幸的是，这还不够。因此，当存在滚动条时，浏览器会为其分配空间，因此 <tbody> 的可用空间比 <thead> 少。请注意这造成的轻微错位......

我能想到的唯一解决方法是在除最后一列之外的所有列上设置最小宽度。

td:nth-child(1), th:nth-child(1) { min-width: 100px; }
td:nth-child(2), th:nth-child(2) { min-width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }

下面的整个codepen示例：

CSS：

.fixed_headers {
  width: 750px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed_headers th {
  text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
  min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
  width: 350px;
}
.fixed_headers thead {
  background-color: #333333;
  color: #fdfdfd;
}
.fixed_headers thead tr {
  display: block;
  position: relative;
}
.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #dddddd;
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}
.old_ie_wrapper tbody {
  height: auto;
}

html:

<!-- IE < 10 does not like giving a tbody a height.  The workaround here applies the scrolling to a wrapped <div>. -->
<!--[if lte IE 9]>
<div class="old_ie_wrapper">
<!--<![endif]-->

<table class="fixed_headers">
  <thead>
    <tr>
      <th>Name</th>
      <th>Color</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Pear</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Grape</td>
      <td>Purple / Green</td>
      <td>These are purple and green.</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>Yellow</td>
      <td>These are yellow.</td>
    </tr>
    <tr>
      <td>Kiwi</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Plum</td>
      <td>Purple</td>
      <td>These are Purple</td>
    </tr>
    <tr>
      <td>Watermelon</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Tomato</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Cherry</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Cantelope</td>
      <td>Orange</td>
      <td>These are orange inside.</td>
    </tr>
    <tr>
      <td>Honeydew</td>
      <td>Green</td>
      <td>These are green inside.</td>
    </tr>
    <tr>
      <td>Papaya</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Raspberry</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Blueberry</td>
      <td>Blue</td>
      <td>These are blue.</td>
    </tr>
    <tr>
      <td>Mango</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
    <tr>
      <td>Passion Fruit</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
  </tbody>
</table>

<!--[if lte IE 9]>
</div>
<!--<![endif]-->

编辑：表格宽度 100% 的替代解决方案（上面实际上是固定宽度，没有回答问题）：

HTML：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Color</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Pear</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Grape</td>
      <td>Purple / Green</td>
      <td>These are purple and green.</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>Yellow</td>
      <td>These are yellow.</td>
    </tr>
    <tr>
      <td>Kiwi</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
  </tbody>
</table>

CSS：

table {
  width: 100%;
  text-align: left;
  min-width: 610px;
}
tr {
  height: 30px;
  padding-top: 10px
}
tbody { 
  height: 150px; 
  overflow-y: auto;
  overflow-x: hidden;
}
th,td,tr,thead,tbody { display: block; }
td,th { float: left; }
td:nth-child(1),
th:nth-child(1) {
  width: 20%;
}
td:nth-child(2),
th:nth-child(2) {
  width: 20%;
  float: left;
}
td:nth-child(3),
th:nth-child(3) {
  width: 59%;
  float: left;
}
/* some colors */
thead {
  background-color: #333333;
  color: #fdfdfd;
}
table tbody tr:nth-child(even) {
  background-color: #dddddd;
}

演示：http://codepen.io/anon/pen/bNJeLO

---

制作 tbody & 后为 td,th 添加固定宽度thead 显示块完美运行，我们也可以使用 slimscroll 插件使滚动条美观。

https://i.stack.imgur.com/mvYi0.png

< td> 第 7 行 - 第 4 列 < td> 第 16 行 - 第 4 列

标题 1	标题 2	标题 3	标题 4
Row 1- Col 1	Row 1 - Col 2	Row 1- Col 3	Row 1- Col 4
Row 2- Col 1	第 2 行 - 第 2 列	第 2 行 - 第 3 列	第 2 行 - 第 4 列
第 3 行 - 列1	第 3 行 - 第 2 列	第 3 行 - 第 3 列	第 3 行 - 第 4 列
第 4 行 - 第 1 列	第 4 行 - 第 2 列	第 4 行 - 第 3 列	第 4 行 - 第 4 列
第 5 行 - 第 1 列	第 5 行 - 第 2 列	第 5 行 - 第 3 列	第 5 行 - 第 4 列
第 6 行 - 第 1 列	第 6 行 - 第 2 列	第 6 行 - 第 3 列	第 6 行 -第 4 列
第 7 行 - 第 1 列	第 7 行 - 第 2 列	第 7 行 - 第 3 列
第 8 行 - 第 1 列	第 8 行 - 第 2 列	Ro w 8- Col 3	Row 8- Col 4
Row 9- Col 1	Row 9- Col 2	Row 9- Col 3	Row 9- Col 4
Row 10- Col 1	Row 10 - Col 2	Row 10- Col 3	Row 10- Col 4
Row 11- Col 1	第 11 行 - 第 2 列	第 11 行 - 第 3 列	第 11 行 - 第 4 列
第 12 行 - 列1	第 12 行 - 第 2 列	第 12 行 - 第 3 列	第 12 行 - 第 4 列
第 13 行 - 第 1 列	第 13 行 - 第 2 列	第 13 行 - 第 3 列	第 13 行 - 第 4 列
第 14 行 - 第 1 列	第 14 行 - 第 2 列	第 14 行 - 第 3 列	第 14 行 - 第 4 列
第 15 行 - 第 1 列	第 15 行 - 第 2 列	第 15 行 - 第 3 列	第 15 行 -第 4 列
第 16 行 - 第 1 列	第 16 行 - 第 2 列	第 16 行 - 第 3 列

---

强制列使用“块”体正确显示的 Css 解决方法

此解决方案仍需要由 jQuery 计算和设置 th 宽度

table.scroll tbody,
table.scroll thead { display: block; }

table.scroll tbody {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 300px;
}

table.scroll tr {
    display: flex;
}

table.scroll tr > td {
    flex-grow: 1;
    flex-basis: 0;
}

和 Jquery / Javascript

var $table = $('#the_table_element'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

$table.addClass('scroll');

// Adjust the width of thead cells when window resizes
$(window).resize(function () {

    // Get the tbody columns width array
    colWidth = $bodyCells.map(function () {
        return $(this).width();
    }).get();

    // Set the width of thead columns
    $table.find('thead tr').children().each(function (i, v) {
        $(v).width(colWidth[i]);
    });

}).resize(); // Trigger resize handler

---

试试下面的方法，很简单很容易实现

下面是jsfiddle链接

http://jsfiddle.net/v2t2k8ke/2/

HTML：

<table border='1' id='tbl_cnt'>
<thead><tr></tr></thead><tbody></tbody>

CSS：

 #tbl_cnt{
 border-collapse: collapse; width: 100%;word-break:break-all;
 }
 #tbl_cnt thead, #tbl_cnt tbody{
 display: block;
 }
 #tbl_cnt thead tr{
 background-color: #8C8787; text-align: center;width:100%;display:block;
 }
 #tbl_cnt tbody {
 height: 100px;overflow-y: auto;overflow-x: hidden;
 }

查询：

 var data = [
    {
    "status":"moving","vehno":"tr544","loc":"bng","dri":"ttt"
    }, {
    "status":"stop","vehno":"tr54","loc":"che", "dri":"ttt"
    },{    "status":"idle","vehno":"yy5499999999999994","loc":"bng","dri":"ttt"
    },{
    "status":"moving","vehno":"tr544","loc":"bng", "dri":"ttt"
    }, {
    "status":"stop","vehno":"tr54","loc":"che","dri":"ttt"
    },{
    "status":"idle","vehno":"yy544","loc":"bng","dri":"ttt"
    }
    ];
   var sth = '';
   $.each(data[0], function (key, value) {
     sth += '<td>' + key + '</td>';
   });
   var stb = '';        
   $.each(data, function (key, value) {
       stb += '<tr>';
       $.each(value, function (key, value) {
       stb += '<td>' + value + '</td>';
       });
       stb += '</tr>';
    });
      $('#tbl_cnt thead tr').append(sth);
      $('#tbl_cnt tbody').append(stb);
      setTimeout(function () {
      var col_cnt=0 
      $.each(data[0], function (key, value) {col_cnt++;});    
      $('#tbl_cnt thead tr').css('width', ($("#tbl_cnt tbody") [0].scrollWidth)+ 'px');
      $('#tbl_cnt thead tr td,#tbl_cnt tbody tr td').css('width',  ($('#tbl_cnt thead tr ').width()/Number(col_cnt)) + 'px');}, 100)

---

试试这个jsfiddle。这是使用 jQuery 并根据 Hashem Qolami 的回答制作的。首先，制作一个常规表格，然后使其可滚动。

const makeScrollableTable = function (tableSelector, tbodyHeight) {
  let $table = $(tableSelector);
  let $bodyCells = $table.find('tbody tr:first').children();
  let $headCells = $table.find('thead tr:first').children();
  let headColWidth = 0;
  let bodyColWidth = 0;
  
  headColWidth = $headCells.map(function () {
    return $(this).outerWidth();
  }).get();
  bodyColWidth = $bodyCells.map(function () {
    return $(this).outerWidth();
  }).get();

  $table.find('thead tr').children().each(function (i, v) {
    $(v).css("width", headColWidth[i]+"px");
    $(v).css("min-width", headColWidth[i]+"px");
    $(v).css("max-width", headColWidth[i]+"px");
  });
  $table.find('tbody tr').children().each(function (i, v) {
    $(v).css("width", bodyColWidth[i]+"px");
    $(v).css("min-width", bodyColWidth[i]+"px");
    $(v).css("max-width", bodyColWidth[i]+"px");
  });

  $table.find('thead').css("display", "block");
  $table.find('tbody').css("display", "block");

  $table.find('tbody').css("height", tbodyHeight+"px");
  $table.find('tbody').css("overflow-y", "auto");
  $table.find('tbody').css("overflow-x", "hidden");
  
};

然后您可以按如下方式使用此功能：

makeScrollableTable('#test-table', 250);

---

这是对我有用的代码，可以在带有可滚动 tbody 的桌子上创建粘性头：

table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:50px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width:400px;
}

---

要使用“overflow:scroll”，您必须在 thead 和 tbody 上设置“display:block”。这会弄乱它们之间的列宽。但是您可以使用 Javascript 克隆 thead 行并将其作为隐藏行粘贴到 tbody 中，以保持准确的 col 宽度。

$('.myTable thead > tr')
    .clone()
    .appendTo('.myTable tbody')
    .addClass('hidden-to-set-col-widths')
;

http://jsfiddle.net/Julesezaar/mup0c5hk/

    <table class="myTable">
        <thead>
            <tr>
                <td>Problem</td>
                <td>Solution</td>
                <td>blah</td>
                <td>derp</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <p>
      Some text to here
    </p>

的CSS：

    table {
      background-color: #aaa;
      width: 100%;
    }
    
    thead,
    tbody {
      display: block; // Necessary to use overflow: scroll
    }
    
    tbody {
      background-color: #ddd;
      height: 150px;
      overflow-y: scroll;
    }
    
    tbody tr.hidden-to-set-col-widths,
    tbody tr.hidden-to-set-col-widths td {
      visibility: hidden;
      height: 0;
      line-height: 0;
      padding-top: 0;
      padding-bottom: 0;
    }
    
    td {
      padding: 3px 10px;
    }

---