如何滚动表并将头部固定在顶部 [英] how scroll table and fix head in top

问题描述

我创建表并修复头部和身体但我不能用这个css滚动它：

。 t1   tbody  {
  height  ：  100px;  
 溢出 ：  auto;  
} 
 
。 t1   thead  >   tr ， tbody  {
  display  ：  阻止;  
} 
 

所以我找到这个链接： http://jsbin.com/bipusabici/edit?html,output

它的工作很棒，但我的问题是表的结构与普通表的不同有thead和tbody 。

它使用这种结构：

 <   div     id   =  tHeadContainer >  
 <  表     >  
 <   tr  >  
 <   td  > 名称<   / td  >  
 <   td  > 运算符<   / td  >  
 <   td  > 开始操作<   / td  >  
 <   td  > 吨位<   / td  >  
  <   td  > 状态<   / td  >  
  <   / tr  >  
 <   / table  >  
 <   / div  >  <！ -     tHeadContainer    - >   
 

 <   div     id   =  tBodyContainer >  
 <   table      >  
 <   tr  >  
 <   td  >  Seabaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa Sun <   / td  >  
 <   td  >  Seabourn Cruise Line <   / td  >  
 .... 
 

这声明head作为单独的表和body作为单独的表也是它的自我分区



但是以正常的方式表结构如下所示它使用thead和tbody NOT单独的表。看看它：

 <  表 >  
 <   thead  >  
 <   tr  >  
 <   th  > 月<   / th  >  
 <   th  > 储蓄<   / th  >  
 <   / tr  >  
 <   / thead  >  
 <   tfoot  >  
 <   tr  >  
 <  < span class =code-leadattribute> td  >  Sum <   / td  >  
 <  < span class =code-leadattribute> td  >  $ 180 <   / td  >  
 <  <小号pan class =code-leadattribute> / tr  >  
 <   / tfoot  >  
 <   tbody  >  
 <   tr  >  
 < ;   td  >  1月<   / td  >  
 < ;   td  >  $ 100 <   / td  >  
 <   / tr  >  
 <   tr  >  
 <   td  > 二月<   / td  >  
 <   td  >  $ 80 <   / td  >  
 <   / tr  >  
 <   / tbody  >  
 <温泉n class =code-keyword><   / table  >  

这是我的小提琴，我希望用这个正常的表结构滚动它： http://jsfiddle.net/snicee/46jz​​hs94/3/

解决方案

180 < / td >
< / tr >
< / tfoot >
< tbody >
< span class =code-keyword>< tr >
< td > 1月< / td >
< td >

100 < / td >
< / tr >
< tr >
< td < span class =code-keyword>> 二月< / t d >
< td >

80 < / td >
< / tr >
< / tbody >
< / table >

这是我的小提琴，我想用这个正常的表结构滚动它： http：/ /jsfiddle.net/snicee/46jz​​hs94/3/

i create table and fix head and body but i can't scroll it with this css :

.t1 tbody {
          height: 100px;
          overflow: auto;
      }

      .t1 thead > tr, tbody {
          display: block;
      }

so i find this link : http://jsbin.com/bipusabici/edit?html,output
it's work great but my problem is that structure of table is different of normal table with thead and tbody.
it's use this structure :

<div id="tHeadContainer">
          <table  >
              <tr>
                  <td>Name</td>
                  <td>Operator</td>
                  <td>Began operation</td>
                  <td>Tonnage</td>
                  <td>Status</td>
              </tr>
          </table>
      </div><!-- tHeadContainer -->

<div id="tBodyContainer">
           <table  >
               <tr>
                   <td>Seabaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaourne Sun</td>
                   <td>Seabourn Cruise Line</td>
                    ....

this declare head as separate table and body as separate table too with it's self div

but in normal way of table structure like below one it's use thead and tbody NOT separate table . look it :

 <table>
  <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
      <td>Sum</td>
      <td>$180</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
     <td>January</td>
     <td>$100</td>
  </tr>
  <tr>
      <td>February</td>
      <td>$80</td>
  </tr>
  </tbody>
</table> 

this is my fiddle and i want scroll it with this normal table structure: http://jsfiddle.net/snicee/46jzhs94/3/

解决方案

180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>

100</td> </tr> <tr> <td>February</td> <td>

80</td> </tr> </tbody> </table>

this is my fiddle and i want scroll it with this normal table structure: http://jsfiddle.net/snicee/46jzhs94/3/

这篇关于如何滚动表并将头部固定在顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！