Cố định <thead> trong <table>

Question

<table border="1" style="height:50px; overflow:auto;"> 
    <thead> 
    <tr> 
     <th>Col 1 
     </th> 
     <th>Col 2 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Cell 3 
     </td> 
     <td>Cell 4 
     </td> 
    </tr> 
    <tr> 
     <td>Cell 5 
     </td> 
     <td>Cell 6 
     </td> 
    </tr> 
    </tbody> 
</table> 

Tôi muốn bảng trên là của 50px chiều cao nên thanh cuộn sẽ kick trong khi nội dung phát triển, nhưng tôi muốn cũng như tiêu đề bảng (thead) được cố định luôn trên đầu trang , trong khi các nội dung khác có thể cuộn được. Có một giải pháp, thích hợp hơn bằng cách sử dụng jQuery?

Cảm ơn trước sự giúp đỡ của bạn.

Answer 1

Hãy thử bài này: jQuery Scrollable, Sortable, Filterable table

Dường như họ đã nhận được những gì bạn cần (mà là một Freezable, bảng jquery cuộn).

Answer 2

<table style="width: 300px" cellpadding="0" cellspacing="0"> 
<tr> 
    <td>Column 1</td> 
    <td>Column 2</td> 
</tr> 
</table> 

<div style="overflow: auto;height: 50px; width: 320px;"> 
    <table style="width: 300px;" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    </table> 
</div> 

Cập nhật:

Kiểm tra này ra:

Link

Another Link a t CSS Tricks

Answer 3

Tìm thấy bản thân mình cần chức năng tương tự. Không thể tìm thấy bất kỳ thứ gì nhẹ nhàng và đơn giản, vì vậy tôi đã tự tạo plugin: TH Float jQuery Plugin

Tôi hy vọng ai đó thấy nó hữu ích.

Answer 4

Đây là mẹo của tôi. Bạn phải thay đổi một cái gì đó trong html của bạn quá.

Bí quyết bao gồm chèn thông qua js sau khi cuộn cuộn thực, một vị trí thứ hai và giống hệt nhau được định vị cố định. Chiều rộng của ô cũng được điều chỉnh thông qua js.

Điều chỉnh mã theo nhu cầu của bạn.

CSS

thead.fixed { 
    position: fixed; 
} 

HTML

<div style="overflow: auto;"> 
    <table id="my_table"> 
    <thead> 
     <tr> 
     <th>Head 1</th> 
     <th>Head 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>Body 1</td> 
     <td>Body 2</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

jQuery

$(function() { 
    fixListThead(); 
}); 
$(window).resize(function() { 
    fixListThead(); 
}); 
var fixListThead = function() { 
    $('#my_table thead.fixed').remove(); // Removes (if present) fixed thead when resizing 
    var widths = []; 
    $('#my_table thead th').each(function(i, element) { 
    widths[i] = $(element).width(); 
    }); 
    $('<thead class="fixed">' + $('#my_table thead').html() + '</thead>').insertAfter($('#my_table thead')); 
    $('#my_table thead.fixed th').each(function(i, element) { 
    $(element).css('width', widths[i] + 'px'); 
    }); 
} 

Answer 5

Sử dụng CSS transform có thể đơn giản hơn:

-webkit-transform','translateY(0px)'