Bảng HTML có tiêu đề cố định và cột cố định?

Question

Có kỹ thuật CSS/JavaScript để hiển thị bảng HTML dài sao cho các tiêu đề cột vẫn cố định trên màn hình và dấu đầu tiên được giữ cố định và cuộn với dữ liệu.

Tôi muốn có thể cuộn qua nội dung của bảng, nhưng để luôn có thể xem các tiêu đề cột ở trên cùng và cột đầu tiên ở bên trái.

Nếu có plugin jQuery sẽ tuyệt vời! Nếu nó giúp trình duyệt duy nhất tôi quan tâm là Firefox.

Answer 1

Tôi biết bạn có thể do it for MSIE và this limited example dường như hoạt động với firefox (không chắc chắn về cách kỹ thuật có thể mở rộng).

Answer 2

Cột đầu tiên có một thanh cuộn trên di động ngay bên dưới tiêu đề

<table> 
    <thead> 
     <th> Header 1</th> 
     <th> Header 2</th> 
     <th> Header 3</th> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <div style="width: 50; height:30; overflow-y: scroll"> 
        Tklasdjf alksjf asjdfk jsadfl kajsdl fjasdk fljsaldk 
        fjlksa djflkasjdflkjsadlkf jsakldjfasdjfklasjdflkjasdlkfjaslkdfjasdf 
       </div> 
      </td> 
      <td> 
       Hello world 
      </td> 
      <td> Hello world2 
     </tr> 
    </tbody> 
</table> 

Answer 3

Nếu những gì bạn muốn là phải có các tiêu đề ở lại đặt trong khi dữ liệu trong cuộn bảng theo chiều dọc, bạn nên thực hiện một tbody < > phong cách với "overflow-y: tự động" như thế này:

<table> 
    <thead> 
    <tr> 
     <th>Header1</th> 
     . . . 
    </tr> 
    </thead> 
    <tbody style="height: 300px; overflow-y: auto"> 
    <tr> 
     . . . 
    </tr> 
    . . . 
    </tbody> 
</table> 

Nếu < tbody> Nội dung phát triển cao hơn so với chiều cao mong muốn, nó sẽ bắt đầu di chuyển. Tuy nhiên, tiêu đề sẽ vẫn cố định ở đầu bất kể vị trí cuộn.

Answer 4

YUI DataTable

Tôi không biết nếu YUI DT có tính năng này nhưng tôi sẽ không ngạc nhiên nếu nó không.

Answer 5

Bạn có thể đang tìm kiếm this.

Tuy nhiên, một số vấn đề đã biết.

Answer 6

dụ làm việc của link posted by pranav:

http://jsbin.com/nolanole/1/edit?html,js,output

FYI: Tested trong IE 6, 7, & (chế độ tương thích hoặc tắt) 8, FF 3 & 3.5, Chrome 2. Không màn hình-reader- thân thiện (tiêu đề không phải là một phần của bảng nội dung).

EDIT 5/5/14: ví dụ đã chuyển sang jsBin. Điều này là cũ, nhưng đáng kinh ngạc vẫn hoạt động trong Chrome, IE và Firefox hiện tại (mặc dù IE và Firefox có thể yêu cầu một số điều chỉnh về chiều cao hàng).

Answer 7

Tôi thấy điều này, mặc dù là một câu hỏi cũ, là một nơi khá tốt để cắm kịch bản của riêng tôi:

http://code.google.com/p/js-scroll-table-header/

Nó chỉ hoạt động không cần cấu hình và thực sự dễ dàng để thiết lập.

Answer 8

Đây là một plugin jQuery tốt, hoạt động trên tất cả các trình duyệt!

Bạn có bảng tiêu đề cố định mà không sửa chiều rộng của nó.

Kiểm tra nó: https://github.com/benjaminleouzon/tablefixedheader

Disclaimer: Tôi là tác giả của plugin.

Answer 9

Trong câu trả lời này cũng là câu trả lời tốt nhất mà tôi tìm thấy câu hỏi của bạn:

HTML table with fixed headers?

và dựa trên CSS tinh khiết.

Answer 10

Tôi đã tạo nội dung có tiêu đề cố định, chân trang cố định, cột cố định bên trái và cột cố định bên phải. Điều này chỉ hoạt động tốt trong IE. Vì hầu hết người dùng vẫn đang sử dụng IE, điều này có thể hữu ích. Vui lòng tìm mã ở đây trong Scrollable Table. Xin vui lòng cho tôi đề xuất của bạn.

Trong khi đó, tôi đang cố gắng khắc phục các cột trong trình duyệt khác. Tôi sẽ giữ cho bạn được đăng. :-)

Answer 11

<script> 
    $(document).ready(function() { 
    $("#GridHeader table").html($('#<%= GridView1.ClientID %>').html()); 
    $("#GridHeader table tbody .rows").remove(); 
    $('#<%= GridView1.ClientID %> tr:first th').hide(); 
}); 
</script> 

<div id="GridHeader"> 
    <table></table> 
</div> 

<div style="overflow: auto; height:400px;"> 
    <asp:GridView ID="GridView1" runat="server" /> 
</div> 

Answer 12

Không hoàn toàn hoàn hảo, nhưng nó giúp tôi gần hơn một số câu trả lời hàng đầu tại đây.

bảng

Hai khác nhau, một với tiêu đề, và người kia, được bao bọc bởi một div với nội dung

<table> 
    <thead> 
    <tr><th>Stuff</th><th>Second Stuff</th></tr> 
    </thead> 
</table> 
<div style="height: 600px; overflow: auto;"> 
    <table> 
    <tbody> 
     //Table 
    </tbody> 
    </table> 
</div> 

Answer 13

Các jQuery DataTables plug-in là một cách tuyệt vời để đạt được excel giống như cột cố định (s) và tiêu đề.

Lưu ý phần ví dụ của trang web và "phần bổ sung".
http://datatables.net/examples/
http://datatables.net/extras/

Các "Extras" phần có các công cụ cho các cột cố định và các tiêu đề cố định.

Cột cố định
http://datatables.net/extras/fixedcolumns/
(Tôi tin rằng ví dụ trên trang này là một trong những phù hợp nhất cho câu hỏi của bạn.)

cố định Tiêu đề
http://datatables.net/extras/fixedheader/
(Bao gồm một ví dụ với một bố cục kiểu bảng tính đầy đủ của trang: http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html)