Làm thế nào tôi có thể để cơ thể của một bảng cuộn nhưng giữ cho đầu cố định tại chỗ?

148

Tôi đang viết một trang nơi tôi cần một bảng HTML để duy trì kích thước đã đặt. Tôi cần các tiêu đề ở đầu bảng để ở đó mọi lúc nhưng tôi cũng cần phần thân của bảng để cuộn cho dù có bao nhiêu hàng được thêm vào bảng. Hãy nghĩ về một phiên bản mini của excel. Đây có vẻ là một nhiệm vụ đơn giản nhưng hầu như mọi giải pháp tôi tìm thấy trên web đều có một số nhược điểm. Làm sao tôi có thể giải quyết việc này?

— bạc hà
nguồn

2

Có rất nhiều ví dụ ngoài kia. cái này là một trong số họ .

— Darren Kopp

Tôi cần nhắm mục tiêu IE6, IE7, FF, ... nhưng đặc biệt là IE không may

— minty

Có rất nhiều hack CSS trong đó. Việc làm việc trong IE7 là chuyện nhỏ.

— Jim

4

Tôi quan tâm đến câu trả lời cho tất cả các trình duyệt!

— bạc hà

15

"Việc làm việc trong IE7 là chuyện nhỏ." Jim, có phải bạn không? Bạn có phải là người quản lý dự án của tôi? :)

— Aaronius

53

Tôi đã phải tìm câu trả lời tương tự. Ví dụ tốt nhất tôi tìm thấy là http://www.cssplay.co.uk/menu/tablescroll.html - Tôi thấy ví dụ # 2 hoạt động tốt với tôi. Bạn sẽ phải đặt chiều cao của bảng bên trong bằng Java Script, phần còn lại là CSS.

— Ken
nguồn

3

Thật không may, phương pháp này thất bại khi bạn có một bảng rộng (cuộn ngang). Bạn sẽ có hai thanh cuộn ngang; Một cho tiêu đề và một cho dữ liệu.

— vol7ron

4

giải pháp của bạn không hoạt động nếu bạn không chỉ định <th> chiều rộng bên trong <thead>

— Alexandru R

2

Để tuân thủ (tương đối) các tiêu chuẩn Stack Overflow mới, bạn có thể chỉnh sửa câu trả lời này để bao gồm các bit có liên quan từ liên kết không?

— Vụ kiện của Quỹ Monica

Nguồn đâu, Billy?

— nến

Không thể đồng bộ hóa độ rộng cột giữa tiêu đề và thân bảng (có thể cuộn) mà không cần dùng đến JavaScript hoặc các giá trị được xác định trước.

— rustyx

34

Tôi thấy DataTables khá linh hoạt. Mặc dù phiên bản mặc định của nó dựa trên jquery, nhưng cũng có một plugin AngularJs .

— Vitalii Fedorenko
nguồn

rất lắt léo - hầu hết các chức năng hoạt động trên S3, android 4.0.4 của tôi, nhưng không phải là tìm kiếm / bộ lọc

— Jens Frandsen

12

Tôi thấy giải pháp tuyệt vời của Sean Haddy cho một câu hỏi tương tự và đã tự do thực hiện một số chỉnh sửa :

Sử dụng các lớp thay vì ID, do đó, một tập lệnh jQuery có thể được sử dụng lại cho nhiều bảng trên một trang
Đã thêm hỗ trợ cho các thành phần bảng HTML ngữ nghĩa như chú thích, thead, t feet và tbody
Thanh cuộn được tạo tùy chọn để nó không xuất hiện cho các bảng "ngắn" hơn chiều cao có thể cuộn
Điều chỉnh độ rộng cuộn của div để đưa thanh cuộn lên cạnh phải của bảng
Khái niệm được thực hiện bởi
- sử dụng aria-hidden = "true" trên tiêu đề bảng tĩnh được chèn
- và để nguyên bản gốc, chỉ cần ẩn với jQuery và thiết lập aria-hidden="false"
Ví dụ hiển thị của nhiều bảng với kích thước khác nhau

Sean đã làm việc nặng, mặc dù. Cũng nhờ Matt Burland, vì đã chỉ ra cần phải hỗ trợ chân.

Vui lòng xem tại http://jsfiddle.net/jhfbler/eNP2N/

— Tiếng Pháp
nguồn

Tốt, nhưng nó vít lên nếu bạn muốn một tiêu đề và chân trang!

— Matt Burland

3

Cảm ơn Matt, tôi đã điều chỉnh.

— Jeromy Pháp

Căn chỉnh cần điều chỉnh nếu bạn hiển thị đường viền td và th.

— dhochee

8

Bạn đã thử sử dụng thead và tbody, và thiết lập một chiều cao cố định trên tbody với tràn: cuộn?

Trình duyệt mục tiêu của bạn là gì?

EDIT: Nó hoạt động tốt (gần như) trong firefox - việc bổ sung thanh cuộn dọc gây ra sự cần thiết của thanh cuộn ngang - yuck. IE chỉ đặt chiều cao của mỗi td thành giá trị mà tôi đã chỉ định chiều cao của tbody. Đây là điều tốt nhất tôi có thể nghĩ ra:

<html>
    <head>
    <title>Blah</title>
    <style type="text/css">
    table { width:300px; }
    tbody { height:10em;  overflow:scroll;}
    td { height:auto; }
    </style>
    </head>
    <body>
    <table>
        <thead>
            <tr>
              <th>One</th><th>Two</th>
              </td>
            </tr>
        </thead>
        <tbody>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
        </tbody>
    </table>
    </body>
</html>

— Chris Marasti-Georg
nguồn

1

Tôi cần nhắm mục tiêu IE6, IE7, FF, ... nhưng đặc biệt là IE không may

— minty

Thay đổi bảng sao cho chiều rộng nhỏ hơn 100%, giả sử 99% và nó sẽ giải quyết vấn đề

— WolfmanDragon

2

overflow-x: hidden;và overflow-y: autocũng giúp đỡ.

— justkt

7

Điều này được sử dụng để làm việc trong firefox, và nó là mã rõ ràng và không lộn xộn. Tuy nhiên, trong các phiên bản mới hơn của firefox, nó đã bị hỏng.

— Rasmus Kaj

6

Điều này không hoạt động vì "tràn" chỉ có thể áp dụng cho "khối chứa" ( w3.org/TR/CSS21/visufx.html#overflow ) và các hộp bảng không phải là "khối chứa" ( w3.org/TR/CSS21/ visuren.html # khối hộp ).

— mhsmith

8

Những gì bạn cần là:

1) có thân bảng có chiều cao giới hạn vì cuộn chỉ xảy ra khi nội dung lớn hơn cửa sổ cuộn. Tuy nhiên tbodykhông thể có kích thước và bạn phải hiển thị nó blockđể làm như vậy:

tbody {
   overflow-y: auto;
   display: block;
   max-height: 10em;    // For example
}

2) Đồng bộ hóa lại tiêu đề cột và chiều rộng thân cột của bảng để làm cho phần sau blocktrở thành một phần tử không liên quan. Cách duy nhất để làm như vậy là mô phỏng đồng bộ hóa bằng cách thực thi cùng chiều rộng cột cho cả hai .

Tuy nhiên, vì tbodybản thân nó là một blockbây giờ, nó không còn có thể cư xử như a table. Vì bạn vẫn cần một tablehành vi để hiển thị chính xác các cột của mình, nên giải pháp là yêu cầu mỗi hàng của bạn hiển thị dưới dạng tables riêng lẻ :

thead {         
   display: table;  
   width: 100%;     // Fill the containing table
}
tbody tr {
   display: table;
   width: 100%;     // Fill the containing table
}

(Lưu ý rằng, sử dụng kỹ thuật này, bạn sẽ không thể trải dài trên các hàng nữa).

Khi đã xong, bạn có thể thực thi độ rộng cột để có cùng chiều rộng ở cả hai theadvà tbody. Bạn không thể:

riêng cho từng cột (thông qua các lớp CSS cụ thể hoặc kiểu dáng nội tuyến), điều này khá tẻ nhạt để làm cho từng thể hiện của bảng;
thống nhất cho tất cả các cột ( th, td { width: 20%; }ví dụ nếu bạn có 5 cột), điều này thực tế hơn (không cần đặt chiều rộng cho mỗi thể hiện của bảng) nhưng không thể hoạt động cho bất kỳ số cột nào
thống nhất cho bất kỳ số lượng cột, thông qua một bố trí bảng cố định.

Tôi thích tùy chọn cuối cùng, yêu cầu thêm:

thead {
   table-layout: fixed;   // Same layout for all cells
}
tbody tr {
   table-layout: fixed;   // Same layout for all cells
}
th, td {
   width: auto;   // Same width for all cells, if table has fixed layout
}

Xem một bản demo ở đây , rẽ nhánh từ câu trả lời cho câu hỏi này .

— Javarome
nguồn

cảm ơn đã giải thích Nó cho biết có bao nhiêu cách như thế này có thể được thực hiện và hầu hết các câu trả lời chỉ đưa ra một số mã và liên kết plunkr, để bạn tự tìm ra nó.

— Paul Rooney ngày

4

Chỉnh sửa: Đây là một câu trả lời rất cũ và ở đây vì sự thịnh vượng chỉ để chứng minh rằng nó đã được hỗ trợ một lần vào những năm 2000 nhưng đã bị loại bỏ vì chiến lược trình duyệt trong năm 2010 là tôn trọng thông số kỹ thuật của W3C ngay cả khi một số tính năng đã bị xóa: Bảng có thể cuộn với tiêu đề cố định / footer được chỉ định một cách vụng về trước HTML5.

Tin xấu

Thật không may, không có cách nào tinh tế để xử lý bảng có thể cuộn với cố định thead/ tfoot vì các thông số kỹ thuật HTML / CSS không rõ ràng về tính năng đó .

Giải thích

Mặc dù Đặc tả HTML 4.01 cho biết thead/ tfoot/ tbodyđược sử dụng (được giới thiệu?) Để cuộn thân bảng:

Các hàng trong bảng có thể được nhóm [...] bằng cách sử dụng các phần tử THEAD, TFOOT và TBODY [...]. Bộ phận này cho phép các tác nhân người dùng hỗ trợ cuộn các thân bàn độc lập với đầu và chân bàn.

Nhưng tính năng bảng có thể cuộn hoạt động trên FF 3.6 đã bị xóa trong FF 3.7 vì được coi là một lỗi vì không tuân thủ các thông số kỹ thuật HTML / CSS. Xem này và rằng ý kiến về lỗi FF.

Mẹo dành cho nhà phát triển Mozilla

Dưới đây là phiên bản đơn giản của các mẹo hữu ích MDN cho bảng có thể cuộn,
xem trang lưu trữ này hoặc phiên bản tiếng Pháp hiện tại

<style type="text/css">
table {
  border-spacing: 0;              /* workaround */
}
tbody {
  height: 4em;                    /* define the height */
  overflow-x: hidden;             /* esthetics */
  overflow-y: auto;               /* allow scrolling cells */
}
td {
  border-left:   1px solid blue;  /* workaround */
  border-bottom: 1px solid blue;  /* workaround */
}
</style>

<table>
    <thead><tr><th>Header
    <tfoot><tr><th>Footer
    <tbody>
        <tr><td>Cell 1    <tr><td>Cell 2
        <tr><td>Cell 3    <tr><td>Cell 4
        <tr><td>Cell 5    <tr><td>Cell 6
        <tr><td>Cell 7    <tr><td>Cell 8
        <tr><td>Cell 9    <tr><td>Cell 10
        <tr><td>Cell 11   <tr><td>Cell 12
        <tr><td>Cell 13   <tr><td>Cell 14
    </tbody>
</table>

Tuy nhiên MDN cũng cho biết điều này không hoạt động nữa trên FF :-(
Tôi cũng đã thử nghiệm trên IE8 => bảng cũng không thể cuộn được: - ((

— olibre
nguồn

Các mẹo MDN cho liên kết bảng có thể cuộn không phải là thông tin liên quan mà nó nói về sự sụp đổ biên giới. Có lẽ trang đã thay đổi vì 5 năm trôi qua

— partizanos

Cảm ơn @partizanos Cuối cùng tôi đã tìm thấy trang wiki gốc trong lịch sử MDN! Câu trả lời cũ của tôi dường như đã lỗi thời nhưng vì sự thịnh vượng, thế hệ nhà phát triển tiếp theo sẽ biết điều đó là có thể và dễ dàng thực hiện trở lại vào những năm 2000 ;-) Chúc mừng

— olibre

3

Không chắc có ai còn nhìn vào điều này không nhưng họ đã làm điều này trước đây là sử dụng hai bảng để hiển thị bảng gốc duy nhất - đầu tiên chỉ là dòng tiêu đề bảng gốc và không có hàng thân bảng (hoặc một hàng thân trống để tạo nó xác nhận).

Thứ hai là trong một div riêng biệt và không có tiêu đề và chỉ có các hàng thân bảng gốc. Các div riêng biệt sau đó được thực hiện cuộn.

Bảng thứ hai trong div của nó được đặt ngay bên dưới bảng đầu tiên trong HTML và nó trông giống như một bảng duy nhất với tiêu đề cố định và phần dưới có thể cuộn được. Tôi mới chỉ thử nghiệm điều này trong Safari, Firefox và IE (phiên bản mới nhất của mỗi phiên bản vào mùa xuân 2010) nhưng nó đã hoạt động trong tất cả chúng.

Vấn đề duy nhất có là bảng đầu tiên sẽ không xác thực nếu không có phần thân (trình xác thực W3.org - nghiêm ngặt XHTML 1.0) và khi tôi thêm một bảng không có nội dung thì nó gây ra một hàng trống. Bạn có thể sử dụng CSS để làm cho điều này không hiển thị nhưng nó vẫn ngốn không gian trên trang.

— Mick
nguồn

Làm thế nào các hàng thêm sẽ chiếm không gian vẫn còn? Nó không phải chiếm bất kỳ không gian màn hình nào nếu bạn sử dụng display: none;, trừ khi bạn có nghĩa là không gian trong nguồn ..?

— ClarkeyBoy

3

Giải pháp này hoạt động trong Chrome 35, Firefox 30 và IE 11 (chưa được thử nghiệm các phiên bản khác)

CSS thuần của nó: http://jsfiddle.net/ffabreti/d4sope1u/

Mọi thứ được đặt để hiển thị: khối, bảng cần có chiều cao:

    table {
        overflow: scroll;
        display: block;    /*inline-block*/
        height: 120px;
    }
    thead > tr  {
        position: absolute;
        display: block;
        padding: 0;
        margin: 0;
        top: 0;
        background-color: gray;
    }
    tbody > tr:nth-of-type(1) {
        margin-top: 16px;
    }
    tbody tr {
        display: block;
    }

    td, th {
        width: 70px;
        border-style:solid;
        border-width:1px;
        border-color:black;
    }

— Fernando Fabreti
nguồn

2

Điều này khiến tôi đau đầu khi cố gắng thực hiện một mạng lưới như vậy cho một ứng dụng của chúng ta. Tôi đã thử tất cả các kỹ thuật khác nhau nhưng chúng đều có vấn đề. Lần gần nhất tôi đến là sử dụng một plugin jQuery như Flexigrid (tìm trên http://www.ajaxrain.com để biết các lựa chọn thay thế), nhưng điều này dường như không hỗ trợ các bảng rộng 100%, đó là những gì tôi cần.

Điều cuối cùng tôi làm là tự mình lăn lộn; Firefox hỗ trợ tbodycác yếu tố cuộn để trình duyệt của tôi đánh hơi và sử dụng CSS thích hợp (cài đặt chiều cao, tràn, v.v ... hỏi bạn có muốn biết thêm chi tiết không) để tạo cuộn đó và sau đó, đối với các trình duyệt khác, tôi đã sử dụng hai bảng riêng biệt được sử dụng table-layout: fixedđể định cỡ thuật toán đảm bảo không vượt quá kích thước đã nêu (các bảng thông thường sẽ mở rộng khi nội dung quá rộng để phù hợp). Bằng cách cho cả hai bảng có chiều rộng giống hệt nhau, tôi có thể sắp xếp các cột của chúng thành hàng. Tôi gói cái thứ hai trong một bộ div để cuộn và với một chút trò đùa tinh nghịch với lề vv được quản lý để có được giao diện và cảm giác tôi muốn.

Xin lỗi nếu câu trả lời này nghe có vẻ hơi mơ hồ ở những nơi; Tôi đang viết nhanh vì tôi không có nhiều thời gian. Để lại một bình luận nếu bạn muốn tôi mở rộng hơn nữa!

— Luke Bennett
nguồn

Xin lỗi để phục hồi chủ đề cũ này, nhưng tôi thực sự cần biết làm thế nào bạn làm việc này. Tôi có FF hoạt động nhưng không phải trình duyệt IE / WebKit. Hãy giúp đỡ khi bạn có thể.

— Alfero Chingono

2

Đây là một mã thực sự hoạt động cho IE và FF (ít nhất):

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        table{
            width: 400px;
        }
        tbody {
            height: 100px;
            overflow: scroll;
        }
        div {
            height: 100px;
            width: 400px;
            position: relative;
        }
        tr.alt td {
            background-color: #EEEEEE;
        }
    </style>
    <!--[if IE]>
        <style type="text/css">
            div {
                overflow-y: scroll;
                overflow-x: hidden;
            }
            thead tr {
                position: absolute;
                top: expression(this.offsetParent.scrollTop);
            }
            tbody {
                height: auto;
            }
        </style>
    <![endif]--> 
</head>
<body>
    <div >
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th style="background: lightgreen;">user</th>
                    <th style="background: lightgreen;">email</th>
                    <th style="background: lightgreen;">id</th>
                    <th style="background: lightgreen;">Y/N</th>
                </tr>
            </thead>
            <tbody align="center">
                <!--[if IE]>
                    <tr>
                        <td colspan="4">on IE it's overridden by the header</td>
                    </tr>
                <![endif]--> 
                <tr>
                    <td>user 1</td>
                    <td>user@user.com</td>
                    <td>1</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 2</td>
                    <td>user@user.com</td>
                    <td>2</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 3</td>
                    <td>user@user.com</td>
                    <td>3</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 4</td>
                    <td>user@user.com</td>
                    <td>4</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 5</td>
                    <td>user@user.com</td>
                    <td>5</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 6</td>
                    <td>user@user.com</td>
                    <td>6</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 7</td>
                    <td>user@user.com</td>
                    <td>7</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 8</td>
                    <td>user@user.com</td>
                    <td>8</td>
                    <td>N</td>
                </tr>
            </tbody>
        </table>
    </div>
</body></html>

Tôi đã thay đổi mã gốc để làm cho nó rõ ràng hơn và cũng để nó hoạt động tốt trong IE và cả FF ..

Mã gốc TẠI ĐÂY

— Daniel Costa
nguồn

1

Trong IE7 / 8, tính năng này chỉ hoạt động ở Chế độ Quirks và nó sẽ ngừng hoạt động ngay khi bạn thêm một loại tài liệu, tức là<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

— ccpizza

1

Đây là sự thay thế của tôi. Nó cũng sử dụng các DIV khác nhau cho đầu trang, thân và chân trang nhưng được đồng bộ hóa để thay đổi kích thước cửa sổ và với tìm kiếm, cuộn, sắp xếp, lọc và định vị:

Danh sách CD của tôi

Nhấp vào nút Jazz, Cổ điển ... để xem các bảng. Nó được thiết lập sao cho nó đầy đủ ngay cả khi tắt JavaScript.

Có vẻ ổn trên IE, FF và WebKit (Chrome, Safari).

— biến mất
nguồn

1

Xin lỗi tôi đã đọc tất cả các câu trả lời cho câu hỏi của bạn.

Vâng đây là điều bạn muốn (tôi đã làm rồi)

Bạn có thể sử dụng hai bảng, có cùng tên lớp để tạo kiểu tương tự, một bảng chỉ có đầu bảng và một bảng khác với các hàng của bạn. Bây giờ đặt bảng này vào trong một div có chiều cao cố định với cuộn overflow-y: auto OR.

— Sanuj
nguồn

1

Vấn đề chính tôi gặp phải với các gợi ý ở trên là có thể cắm vào bảngorter.js VÀ có thể thả nổi các tiêu đề cho một bảng bị ràng buộc với kích thước tối đa cụ thể. Cuối cùng tôi tình cờ tìm thấy plugin jQuery.floatThead , nơi cung cấp các tiêu đề nổi và cho phép sắp xếp để tiếp tục hoạt động.

Nó cũng có một trang so sánh đẹp hiển thị chính nó so với các plugin tương tự .

— Guy Hollington
nguồn

1

Live JsFiddle

Có thể chỉ với HTML & CSS

table.scrollTable {
  border: 1px solid #963;
  width: 718px;
}

thead.fixedHeader {
  display: block;
}

thead.fixedHeader tr {
  height: 30px;
  background: #c96;
}

thead.fixedHeader tr th {
  border-right: 1px solid black;
}

tbody.scrollContent {
  display: block;
  height: 262px;
  overflow: auto;
}

tbody.scrollContent td {
  background: #eee;
  border-right: 1px solid black;
  height: 25px;
}

tbody.scrollContent tr.alternateRow td {
  background: #fff;
}

thead.fixedHeader th {
  width: 233px;
}

thead.fixedHeader th:last-child {
  width: 251px;
}

tbody.scrollContent td {
  width: 233px;
}

<table cellspacing="0" cellpadding="0" class="scrollTable">
  <thead class="fixedHeader">
    <tr class="alternateRow">
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody class="scrollContent">
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>End of Cell Content 1</td>
      <td>End of Cell Content 2</td>
      <td>End of Cell Content 3</td>
    </tr>
  </tbody>
</table>

Mở rộng đoạn trích

— Ông bà
nguồn

0

Nếu sử dụng JavaScript ở đây là giải pháp của tôi, hãy tạo một bảng đặt chiều rộng cố định trên tất cả các cột (pixel!) Thêm lớp Scrollify vào bảng và thêm javascript + jquery 1.4.x đặt chiều cao theo css hoặc kiểu!

Đã thử nghiệm trong: Opera, Chrome, Safari, FF, IE5.5 ( Kịch bản sử thi thất bại ), IE6, IE7, IE8, IE9

//Usage add Scrollify class to a table where all columns (header and body) have a fixed pixel width
$(document).ready(function () {
    $("table.Scrollify").each(function (index, element) {
        var header = $(element).children().children().first();
        var headerHtml = header.html();
        var width = $(element).outerWidth();
        var height = parseInt($(element).css("height")) - header.outerHeight();
        $(element).height("auto");
        header.remove();
        var html = "<table style=\"border-collapse: collapse;\" border=\"1\" rules=\"all\" cellspacing=\"0\"><tr>" + headerHtml +
                         "</tr></table><div style=\"overflow: auto;border:0;margin:0;padding:0;height:" + height + "px;width:" + (parseInt(width) + scrollbarWidth()) + "px;\">" +
                         $(element).parent().html() + "</div>";

        $(element).parent().html(html);
    });
});


//Function source: http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
//License: Apache License, version 2
function scrollbarWidth() {
    var scr = null;
    var inn = null;
    var wNoScroll = 0;
    var wScroll = 0;

    // Outer scrolling div
    scr = document.createElement('div');
    scr.style.position = 'absolute';
    scr.style.top = '-1000px';
    scr.style.left = '-1000px';
    scr.style.width = '100px';
    scr.style.height = '50px';
    // Start with no scrollbar
    scr.style.overflow = 'hidden';

    // Inner content div
    inn = document.createElement('div');
    inn.style.width = '100%';
    inn.style.height = '200px';

    // Put the inner div in the scrolling div
    scr.appendChild(inn);
    // Append the scrolling div to the doc
    document.body.appendChild(scr);

    // Width of the inner div sans scrollbar
    wNoScroll = inn.offsetWidth;
    // Add the scrollbar
    scr.style.overflow = 'auto';
    // Width of the inner div width scrollbar
    wScroll = inn.offsetWidth;

    // Remove the scrolling div from the doc
    document.body.removeChild(
        document.body.lastChild);

    // Pixel width of the scroller
    return (wNoScroll - wScroll);
}

Chỉnh sửa: Đã sửa chiều cao.

— Peter
nguồn

0

Tôi làm điều này với javascript (không có thư viện) và CSS - thân bảng cuộn với trang và bảng không phải có chiều rộng hoặc chiều cao cố định, mặc dù mỗi cột phải có chiều rộng. Bạn cũng có thể tiếp tục sắp xếp chức năng.

Về cơ bản:

Trong HTML, tạo div div container để định vị hàng tiêu đề bảng và thân bảng, cũng tạo div "mặt nạ" để ẩn thân bảng khi cuộn qua tiêu đề
Trong CSS, chuyển đổi các phần của bảng thành các khối
Trong Javascript, lấy chiều rộng của bảng và khớp với chiều rộng của mặt nạ ... lấy chiều cao của nội dung trang ... đo vị trí cuộn ... thao tác CSS để đặt vị trí hàng tiêu đề của bảng và chiều cao của mặt nạ

Đây là javascript và jsFiddle DEMO.

// get table width and match the mask width

function setMaskWidth() { 
  if (document.getElementById('mask') !==null) {
    var tableWidth = document.getElementById('theTable').offsetWidth;

    // match elements to the table width
    document.getElementById('mask').style.width = tableWidth + "px";
   }
}

function fixTop() {

  // get height of page content 
  function getScrollY() {
      var y = 0;
      if( typeof ( window.pageYOffset ) == 'number' ) {
        y = window.pageYOffset;
      } else if ( document.body && ( document.body.scrollTop) ) {
        y = document.body.scrollTop;
      } else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
        y = document.documentElement.scrollTop;
      }
      return [y];
  }  

  var y = getScrollY();
  var y = y[0];

  if (document.getElementById('mask') !==null) {
      document.getElementById('mask').style.height = y + "px" ;

      if (document.all && document.querySelector && !document.addEventListener) {
        document.styleSheets[1].rules[0].style.top = y + "px" ;
      } else {
        document.styleSheets[1].cssRules[0].style.top = y + "px" ;
      }
  }

}

window.onscroll = function() {
  setMaskWidth();
  fixTop();
}

— Con nợ
nguồn

Nhưng trong bản demo của bạn, tiêu đề bảng không được đặt, nó chỉ cuộn đi. (Chrome ở đây.)

— Sz.

Tôi không thấy điều đó trong Chrome. Bạn có chắc chắn rằng bạn không nhầm các ô được tô sáng màu vàng với các hướng dẫn màu đỏ cho tiêu đề? Các ô tiêu đề nằm ở trên cùng và có màu xám trên xám ("Col 1", "Col 2", v.v.).

— Deborah

0

Đối với tôi, không có gì liên quan đến cuộn thực sự hoạt động cho đến khi tôi loại bỏ độ rộng khỏi CSS bảng. Ban đầu, bảng CSS trông như thế này:

.table-fill {
    background: white;
    border-radius:3px;
    border-collapse: collapse;
    margin: auto;
    width: 100%;
    max-width: 800px;
    padding:5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    animation: float 5s infinite;
}

Ngay khi tôi loại bỏ chiều rộng: 100%; tất cả các tính năng cuộn bắt đầu làm việc.

— Công viên Matthew
nguồn

0

Nếu bạn có tiêu chuẩn đủ thấp;) bạn có thể đặt một bảng chỉ chứa một tiêu đề ngay phía trên một bảng chỉ có phần thân. Nó sẽ không cuộn theo chiều ngang, nhưng nếu bạn không cần ...

— M610
nguồn