How to make header row of a table (with horizontal and vertical scrollers) fixed?

2022-12-27 07:05 问答作者：

I've this sample table and I want to make header row of table visible all the time. Header row should scroll with horizontal scrollbar and shouldn't scroll with vertical scrollbar.

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&g开发者_Python百科t;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>

How can I do this with css only? Suggestions in this and this thread didn't seem to work, possibly due to presence of scrollbars.

EDIT

I'm looking for a css solution. Table structure and layout can't be changed. Other than this there is no restriction on html.

This solution doesn't require any div. Just css and a few Jquery lines.

<!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);
     });
 })

You can use CSS's position:fixed coupled with some other properties to achieve that.