如何固定表格的标题行（带有水平和垂直滚动条）？答案

【问题标题】：How to make header row of a table (with horizontal and vertical scrollers) fixed?如何固定表格的标题行（带有水平和垂直滚动条）？
【发布时间】：2011-02-07 19:07:06
【问题描述】：

我有这个示例table，我想让表格的标题行一直可见。标题行应随水平滚动条滚动，不应随垂直滚动条滚动。

表：

<div style="width:800px; height:150px;overflow:scroll;margin:50px auto;">
<table style="width:1600px" border="1">
    <thead style="">
      <tr>
        <th style="width:800px">id_1</th>
        <th style="width:800px">id_2</th>
      </tr>
    </thead>
    <tbody style="">
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
    </tbody>
</table>
</div>

我怎样才能只用 css 做到这一点？ this 和 this 线程中的建议似乎不起作用，可能是由于存在滚动条。

编辑

我正在寻找一个 CSS 解决方案。表结构和布局无法更改。除此之外，对 html 没有任何限制。

【问题讨论】：

如果您还在寻找答案，请查看：stackoverflow.com/questions/14977864/…

标签： html css html-table

【解决方案1】：

您可以使用 CSS 的 position:fixed 结合其他一些属性来实现。

See this for more information.

【讨论】：

position:fixed 不起作用，因为标题必须使用水平滚动条滚动。

【解决方案2】：

试试这个，使用 2 个 div

<div style="width:800px; margin:0 0 0 0;">
<table  width="800" border="1" cellpadding="3">
    <thead style="">
      <tr>
        <th style="width:400px">id_11</th>
        <th style="width:400px">id_2</th>
      </tr>
    </thead>
</table>
</div>
<div style="width:820px; height:150px;overflow:scroll;margin:0 0 0 0; overflow-x: hidden;">
<table  width="800" border="1" cellpadding="3">
    <tbody style="">
      <tr><td style="width:400px">1200</td><td style="width:400px">1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
    </tbody>
</table>
</div>

【讨论】：

不幸的是，我无法使用此解决方法，因为在我的情况下，thead 必须存在于 table 中才能使其他 javascript 工作正常。除了您的情况下的列宽是 400 像素，它必须是 800 像素。这是一个特殊情况，因为在我的情况下，表格的总宽度是 1600 像素，比我的屏幕宽。因此总是需要水平滚动条。

【解决方案3】：

此解决方案不需要任何 div。只需 css 和几行 Jquery 行。

<!DOCTYPE html>
<html>
 <head>
     <title></title>
</head>
<body>
   <table id="mytable">
        <thead class="fixedHeader">
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>                   
            </tr>
        </thead>
        <tbody class="scrollContent">
            <tr>
                <td><td>
                <td><td>
                <td><td>
                <td><td>
                <td><td>                    
            <tr>
        </tbody>
   </table>
 </body>
<html>

//css

 #mytable{
  position: absolute;
  top:3.2em;
 }
 #mytable thead.fixedHeader tr{
  width:100%;
  height:2.3em;
  position: fixed;
  display: block; 
  /*The background to be replaced by your own pix or color*/    
  background: url('img/bluegrad.png') 0 0 repeat-x;
  top:4.3em;
 } 
 #mytable tbody.scrollContent {
  width: 100%; 
 }

//JQuery
 $(function(){
      //get all th from the table
  //get all td from the table
  //td number has to be equal th number to avoid trouble
  var ths = $('table#my_table tr:nth-child(1) th');
  var tds = $('table#my_table tr:nth-child(2) td');

     $(tds).each(function(idx){
      //for each td get width 
  //and pass to corresponding th
  var w = $(this).width();
   $(ths).eq(idx).width(w);
     });
 })

【讨论】：