这是为我工作的代码，在一个可滚动的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;
}

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

下面是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;
 }

Jquery:

 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)

我使用display:block来表示头部和身体。 因此，标题列的宽度与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 //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); } table {margin:0 auto; border-collapse:separate;} thead {background:#CCCCCC;display:block} tbody {height:10em;overflow-y:scroll;display:block} <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="myTable" border="1"> <thead> <tr> <th>A really Very Long Header Text</th> <th>Normal Header</th> <th>Short</th> </tr> </thead> <tbody> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> </tbody> </table>

CSS-only

Chrome, Firefox, Edge(和其他常青树浏览器)

简单位置:粘;上图:0;第th元素:

/* Fix table head */ .tableFixHead { overflow: auto; height: 100px; } .tableFixHead th { position: sticky; top: 0; } /* Just common table stuff. */ table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 16px; } th { background:#eee; } <div class="tableFixHead"> <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> </tbody> </table> </div>

PS:如果你需要边界的TH元素TH {box-shadow: 1px 1px 0 #000;Border-top: 0;}将会有帮助(因为默认的边框不会在滚动上正确绘制)。

对于上面的一个变体，为了适应IE11，只使用了一点JS，请参阅下面的答案:固定标题和可滚动正文

试试这个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);

使用“overflow: scroll”时，必须在头部和尾部设置“display:block”。这会打乱它们之间的列宽。但随后你可以用Javascript复制标题行，并将其作为隐藏行粘贴到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;
    }