How to make fixed header table inside scrollable div?

问题:

I want to make header of my table fixed. Table is present inside the scrollable div. Below is my code.

     
         
Order ID
                     
Order Date
                     
Status
                     
Vol Number
                     
Bonus Paid
                     
Reason for no Bonus
                 
                     
                     
                     
Data Not Available
                     
Data Not Available
                     
Data Not Available
                 
 
 

Below is my CSS, which I am using for the above div:

#table-wrapper {     position:relative; }  #table-scroll {     height:250px;     overflow:auto;       margin-top:20px; }  #table-wrapper table {     width:100%; }  #table-wrapper table * {     background:white;     color:black; }  #table-wrapper table thead th .text {     position:absolute;        top:-20px;     z-index:2;     height:20px;     width:35%;     border:1px solid red; } 

回答1:

How about doing something like this? I've made it from scratch...

What I've done is used 2 tables, one for header, which will be static always, and the other table renders cells, which I've wrapped using a div element with a fixed height, and to enable scroll, am using overflow-y: auto;

Also make sure you use table-layout: fixed; with fixed width td elements so that your table doesn't break when a string without white space is used, so inorder to break that string am using word-wrap: break-word;

Demo

.wrap {     width: 352px; }  .wrap table {     width: 300px;     table-layout: fixed; }  table tr td {     padding: 5px;     border: 1px solid #eee;     width: 100px;     word-wrap: break-word; }  table.head tr td {     background: #eee; }  .inner_table {     height: 100px;     overflow-y: auto; }  
     
Head 1
             
Head 1
             
Head 1
         
         
Body 1
             
Body 1
             
Body 1
         
 
 

回答2:

Some of these answers seem unnecessarily complex. Make your tbody:

display: block; height: 300px; overflow-y: auto 

Then manually set the widths of each column so that the thead and tbody columns are the same width. Setting the table's style="table-layout: fixed" may also be necessary.

回答3:

I think you need something like this ?

Like this http://s13.postimage.org/rv6jqaxvr/tabel_fixed_header.jpg

..... 
Judul1
     
Judul2
     
Judul3
     
Judul4
    
       
       
td1 
                      
td2
                      
td2
                      
td2
                  
    
  

Source

回答4:

I needed the same and this solution worked the most simple and straightforward way:

http://www.farinspace.com/jquery-scrollable-table-plugin/

I just give an id to the table I want to scroll and put one line in Javascript. That's it!

By the way, first I also thought I want to use a scrollable div, but it is not necessary at all. You can use a div and put it into it, but this solution does just what we need: scrolls the table.

回答5:

This is my "crutches" solution by using html and css. There used 2 tables and fixed width of tables and table cell`s

https://jsfiddle.net/babaikawow/s2xyct24/1/

HTML:

CSS:

回答6:

A Fiddle would have been more helpful nevertheless from what I understand, I guess what you need is persistent headers, look into this

http://css-tricks.com/persistent-headers/

回答7:

This code works form me. Include the jquery.js file.

      
 
 
 
    
Firstname
   
Lastname
        
Points
   
   
   
        
   
   
Jillsddddddddddddddddddddddddddd
   
Smith
           
50
   
    
Eve
   
Jackson
         
9400000000000000000000000000000
 
    
John
   
Doe
         
80
 
    
Jillsddddddddddddddddddddddddddd
   
Smith
        
50
   
    
Eve
   
Jackson
         
9400000000000000000000000000000
 
    
John
   
Doe
         
80
 
  
    

回答8:

use StickyTableHeaders.js for this.

Header was transparent . so try to add this css .

thead {     border-top: none;     border-bottom: none;     background-color: #FFF; } 

文章来源: How to make fixed header table inside scrollable div?