Question

我有这个示例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没有限制。

Answer 1

此解决方案不需要任何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);
     });
 })

Answer 2

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

<强> See this for more information.

Answer 3

尝试使用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>

alt text http://img204.imageshack.us/img204/4431/tablenj.jpg

如何修复表格的标题行（水平和垂直滚动条）？

3 个答案: