Bảng khởi động Twitter bootstrap

Tôi muốn có một bảng trên trang web của tôi. Vấn đề là bảng này sẽ có khoảng 400 dòng. Làm cách nào tôi có thể giới hạn chiều cao của bảng và áp dụng thanh cuộn cho nó? Đây là mã của tôi:

<div class="span3">
  <h2>Achievements left</h2>
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Something</td>
    </tr>
  </tbody>
</table>

  <p><a class="btn" href="#">View details &raquo;</a></p>
</div>

Tôi đã cố gắng áp dụng chiều cao tối đa và chiều cao cố định cho bảng, nhưng nó không hoạt động.

Các yếu tố bảng không xuất hiện để hỗ trợ điều này trực tiếp. Đặt bảng trong div và đặt chiều cao của div và đặt overflow: auto.

.span3 {  
    height: 100px !important;
    overflow: scroll;
}​

Bạn sẽ muốn bọc nó trong div của chính nó hoặc cung cấp cho span3 một id của chính nó để bạn không ảnh hưởng đến toàn bộ bố cục của mình.

Đây là một câu đố: http://jsfiddle.net/zm6rf/

Đừng cần bọc nó trong một div ...

CSS :

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}

table{
 height:300px;              // <-- Select the height of the table
 display: -moz-groupbox;    // Firefox Bad Effect
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

Bootply : http://www.bootply.com/AgI8LpDugl

Tôi đã có cùng một vấn đề và sử dụng kết hợp các giải pháp trên (và thêm một nút xoắn của riêng tôi). Lưu ý rằng tôi phải chỉ định độ rộng cột để giữ cho chúng phù hợp giữa tiêu đề và phần thân.

Trong giải pháp của tôi, tiêu đề và chân trang vẫn cố định trong khi cơ thể cuộn.

<div class="table-responsive">
    <table class="table table-striped table-hover table-condensed">
        <thead>
            <tr>
                <th width="25%">First Name</th>
                <th width="13%">Last Name</th>
                <th width="25%" class="text-center">Address</th>
                <th width="25%" class="text-center">City</th>
                <th width="4%" class="text-center">State</th>
                <th width="8%" class="text-center">Zip</th>
            </tr>
        </thead>
    </table>
    <div class="bodycontainer scrollable">
        <table class="table table-hover table-striped table-condensed table-scrollable">
            <tbody>
                <!-- add rows here, specifying same widths as in header, at least on one row -->
            </tbody>
        </table>
    </div>
    <table class="table table-hover table-striped table-condensed">
        <tfoot>
            <!-- add your footer here... -->
        </tfoot>
    </table>
</div>

Và sau đó chỉ cần áp dụng CSS sau:

.bodycontainer { max-height: 450px; width: 100%; margin: 0; overflow-y: auto; }
.table-scrollable { margin: 0; padding: 0; }

Tôi mong điều này giúp được người nào khác.

Gần đây tôi đã phải làm điều này với bootstrap và angularjs, tôi đã tạo ra một lệnh angularjs để giải quyết vấn đề, bạn có thể xem một ví dụ hoạt động và chi tiết về bài đăng trên blog này .

Bạn sử dụng nó chỉ bằng cách thêm một thuộc tính tiêu đề cố định vào thẻ bảng:

<table class="table table-bordered" fixed-header>
...
</table>

Nếu bạn không sử dụng angularjs, bạn có thể điều chỉnh javascript của lệnh và thay vào đó sử dụng trực tiếp.

CSS

.achievements-wrapper { height: 300px; overflow: auto; }

HTML

<div class="span3 achievements-wrapper">
    <h2>Achievements left</h2>
    <table class="table table-striped">
    ...
    </table>
</div>

Đây có thể không phải là một giải pháp cho số lượng hàng lớn. Tôi chỉ đơn giản là sử dụng thủ thuật bảng sao chép để hoàn thành công việc cho bảng đếm hàng nhỏ trong khi nó có thể giữ chiều rộng cột flex, bạn có thể thử câu đố này .

(Cột chiều rộng cố định là phương pháp tôi sử dụng cho bảng đếm hàng lớn chỉ yêu cầu sao chép hàng tiêu đề)

Mã mẫu:

<div style="height:30px;overflow:hidden;margin-right:15px;">
   <table class="table">
       <thead>
           <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cel 1,1</td>
                <td>Cel 1,2</td>
                <td>Cel 1,3</td>
            </tr>
            <tr>
                <td>Cel 2,1</td>
                <td>Cel 2,2</td>
                <td>Cel 2,3</td>
            </tr>
            <tr>
                <td>Cel 3,1</td>
                <td>Cel 3,2</td>
                <td>Cel 3,3</td>
            </tr>


        </tbody>
    </table>
</div>
<div style="height:100px;overflow-y:scroll;;">
    <table class="table">
        <thead>

        </thead>
        <tbody>
            <tr>
                <td>Cel 1,1</td>
                <td>Cel 1,2</td>
                <td>Cel 1,3</td>
            </tr>
            <tr>
                <td>Cel 2,1</td>
                <td>Cel 2,2</td>
                <td>Cel 2,3</td>
            </tr>
            <tr>
                <td>Cel 3,1</td>
                <td>Cel 3,2</td>
                <td>Cel 3,3</td>
            </tr>
             <tr style="color:white">
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </tbody>
    </table>
</div>

Đặt bảng trong một div và cung cấp cho div đó lớp pre-scrollable.

Gần đây tôi đã có một vấn đề tương tự và cuối cùng đã sửa nó bằng cách sử dụng hỗn hợp các giải pháp khác nhau.

Đầu tiên và đơn giản nhất là sử dụng hai bảng, một cho tiêu đề và một cho cơ thể. Điều này hoạt động nhưng các tiêu đề và các cột cơ thể không được căn chỉnh. Và, vì tôi muốn sử dụng kích thước tự động đi kèm với các bảng bootstrap twitter, cuối cùng tôi đã tạo ra một hàm Javascript thay đổi các tiêu đề khi: phần thân được hiển thị; các cửa sổ được thay đổi kích thước; dữ liệu trong cột thay đổi, v.v.

Đây là một số mã tôi đã sử dụng:

        <table class="table table-striped table-hover" style="margin-bottom: 0px;">
        <thead>
            <tr>
                <th data-sort="id">Header 1</i></th>
                <th data-sort="guide">Header 2</th>
                <th data-sort="origin">Header 3</th>
                <th data-sort="supplier">Header 4</th>
            </tr>
        </thead>
    </table>
    <div class="bodycontainer scrollable">
        <table class="table table-hover table-striped table-scrollable">
            <tbody id="rows"></tbody>
        </table>
    </div>

Các tiêu đề và cơ thể được chia thành hai bảng riêng biệt. Một trong số chúng nằm trong DIV với kiểu dáng cần thiết để tạo các thanh cuộn dọc. Đây là CSS tôi đã sử dụng:

.bodycontainer {
  //height: 200px
  width: 100%;
  margin: 0;
}

.table-scrollable {
  margin: 0px;
  padding: 0px;
}

Tôi nhận xét chiều cao ở đây vì tôi muốn bảng đạt đến cuối trang, bất kể chiều cao trang có thể là bao nhiêu.

Các thuộc tính sắp xếp dữ liệu tôi sử dụng trong các tiêu đề cũng được sử dụng trong mọi td. Bằng cách này tôi có thể có được chiều rộng và phần đệm của mỗi td và chiều rộng của hàng. Sử dụng các thuộc tính sắp xếp dữ liệu tôi đặt bằng CSS, phần đệm và chiều rộng của mỗi tiêu đề tương ứng và của hàng tiêu đề luôn lớn hơn vì nó không có thanh cuộn. Đây là chức năng sử dụng coffeescript:

fixHeaders: =>
  for header, i in @headers
    tdpadding = parseInt(@$("td[data-sort=#{header}]").css('padding'))
    tdwidth = parseInt(@$("td[data-sort=#{header}]").css('width'))
    @$("th[data-sort=#{header}]").css('padding', tdpadding)
    @$("th[data-sort=#{header}]").css('width', tdwidth)
    if (i+1) == @headers.length
      trwidth = @$("td[data-sort=#{header}]").parent().css('width')
      @$("th[data-sort=#{header}]").parent().parent().parent().css('width', trwidth)
      @$('.bodycontainer').css('height', window.innerHeight - ($('html').outerHeight() -@$('.bodycontainer').outerHeight() ) ) unless @collection.length == 0

Ở đây tôi giả sử rằng bạn có một loạt các tiêu đề được gọi là @headers.

Nó không đẹp nhưng nó hoạt động. Hy vọng nó sẽ giúp được ai đó.

Tất cả các giải pháp trên cũng tạo cuộn tiêu đề bảng ... Nếu bạn chỉ muốn cuộn tbody thì hãy áp dụng điều này:

tbody {
    height: 100px !important;
    overflow: scroll;
    display:block;
}

Không có câu trả lời nào làm việc thỏa đáng cho tôi. Họ đã không sửa hàng tiêu đề bảng tại chỗ hoặc họ yêu cầu độ rộng cột cố định để hoạt động và thậm chí sau đó có xu hướng có hàng tiêu đề và hàng thân trong các trình duyệt khác nhau.

Tôi khuyên bạn nên cắn đạn và sử dụng một điều khiển lưới đúng như jsGrid hoặc yêu thích cá nhân của tôi, SlickGrid . Nó rõ ràng giới thiệu một sự phụ thuộc nhưng nếu bạn muốn các bảng của bạn hoạt động giống như các lưới thực sự với sự hỗ trợ của nhiều trình duyệt, điều này sẽ giúp bạn tiết kiệm việc nhổ tóc. Nó cũng cung cấp cho bạn tùy chọn sắp xếp và thay đổi kích thước các cột cộng với hàng tấn các tính năng khác nếu bạn muốn chúng.

Đề nghị của Jonathan Wood. Tôi không có tùy chọn gói bảng với div mới vì tôi đang sử dụng CMS. Sử dụng JQuery ở đây những gì tôi đã làm:

$( "table" ).wrap( "<div class='table-overflow'></div>" );

Điều này bao bọc các phần tử bảng với một div mới với lớp "tràn bảng".

Sau đó, bạn có thể chỉ cần thêm định nghĩa sau vào tệp css của mình:

.table-overflow { overflow: auto; }     

Đặt bảng bên trong div để tạo bảng có thể cuộn theo chiều dọc. thay đổi overflow-yđể overflow-xlàm cho bảng có thể cuộn theo chiều ngang. chỉ overflowđể làm cho bảng có thể cuộn cả ngang và dọc.

<div style="overflow-y: scroll;"> 
    <table>
    ...
    </table>
</div>

Hình tôi sẽ đăng lên đây vì tôi không thể làm bất cứ điều gì ở trên để làm việc với Bootstrap 4. Tôi đã tìm thấy trực tuyến này và hoạt động hoàn hảo cho tôi ...

table
{
    width: 100%;
    display: block;
    border:solid black 1px;
}

thead
{
    display: inline-block;
    width: 100%;
    height: 20px;
}

tbody
{
    height: 200px;
    display: inline-block;
    width: 100%;
    overflow: auto;
}

th, td
{
    width: 100px;
    border:solid 1px black;
    text-align:center;
}

Tôi cũng đã đính kèm jsfulum làm việc.

https://jsfiddle.net/jgngg28t/

Hy vọng nó sẽ giúp người khác.