Tabel bootstrap Twitter digulir

Saya ingin memiliki meja di situs web saya. Masalahnya adalah bahwa tabel ini akan memiliki sekitar 400 baris. Bagaimana saya bisa membatasi ketinggian meja, dan menerapkan scrollbar padanya? Ini kode saya:

<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>

Saya mencoba menerapkan max-height dan fix fixed to table, tetapi tidak berhasil.

Elemen tabel tampaknya tidak mendukung ini secara langsung. Tempatkan tabel dalam div dan atur ketinggian div dan atur overflow: auto.

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

Anda ingin membungkusnya dalam div itu sendiri atau memberikan span3 id itu sendiri sehingga Anda tidak memengaruhi seluruh tata letak Anda.

Berikut biola: http://jsfiddle.net/zm6rf/

Tidak perlu membungkusnya dalam 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

Saya memiliki masalah yang sama dan menggunakan kombinasi solusi di atas (dan menambahkan twist saya sendiri). Perhatikan bahwa saya harus menentukan lebar kolom agar tetap konsisten di antara tajuk dan badan.

Dalam solusi saya, header dan footer tetap diperbaiki sementara body bergulir.

<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>

Dan kemudian baru saja menerapkan CSS berikut:

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

Saya harap ini membantu orang lain.

Saya baru-baru ini harus melakukan ini dengan bootstrap dan angularjs, saya membuat arahan angularjs yang memecahkan masalah, Anda dapat melihat contoh dan detail kerja di posting blog ini .

Anda menggunakannya hanya dengan menambahkan atribut tajuk tetap ke tag tabel:

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

Jika Anda tidak menggunakan angular, Anda dapat mengubah javascript arahan dan menggunakannya secara langsung.

CSS

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

HTML

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

Ini mungkin bukan solusi untuk jumlah baris besar. Saya hanya menggunakan trik tabel duplikasi untuk menyelesaikan hal itu untuk tabel jumlah baris kecil sementara itu dapat menjaga lebar kolom fleksibel, Anda dapat mencoba biola ini .

(Kolom dengan lebar tetap adalah metode yang saya gunakan untuk tabel jumlah baris besar yang hanya membutuhkan duplikasi baris header)

Kode sampel:

<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>

Letakkan tabel dalam div dan berikan div itu kelas pre-scrollable.

Baru-baru ini saya memiliki masalah yang sama dan akhirnya memperbaikinya menggunakan campuran solusi yang berbeda.

Yang pertama dan paling sederhana adalah menggunakan dua tabel, satu untuk header dan satu untuk tubuh. Ini berfungsi tetapi header dan kolom tubuh tidak selaras. Dan, karena saya ingin menggunakan ukuran-otomatis yang datang dengan tabel bootstrap twitter, saya akhirnya membuat fungsi Javascript yang mengubah header ketika: body dirender; ukuran jendela diubah; data di kolom berubah, dll.

Berikut ini beberapa kode yang saya gunakan:

        <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>

Header dan tubuh dibagi dalam dua tabel terpisah. Salah satunya adalah di dalam DIV dengan gaya yang diperlukan untuk menghasilkan scrollbar vertikal. Berikut adalah CSS yang saya gunakan:

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

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

Saya berkomentar ketinggian di sini karena saya ingin meja mencapai bagian bawah halaman, apa pun tingginya halaman.

Atribut data-sort yang saya gunakan di header juga digunakan di setiap td. Dengan cara ini saya bisa mendapatkan lebar dan bantalan setiap td dan lebar baris. Menggunakan atribut data-sort yang saya atur menggunakan CSS padding dan lebar masing-masing header sesuai dan dari baris header yang selalu lebih besar karena tidak memiliki scrollbar. Berikut adalah fungsinya menggunakan 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

Di sini saya berasumsi bahwa Anda memiliki array header yang disebut @ header.

Itu tidak cantik tapi berhasil. Semoga ini bisa membantu seseorang.

Semua solusi di atas juga membuat gulir tajuk tabel ... Jika Anda hanya ingin menggulir tbody, terapkan ini:

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

Tidak satu pun dari jawaban ini yang memuaskan bagi saya. Mereka juga tidak memperbaiki baris judul tabel di tempat atau mereka membutuhkan lebar kolom tetap untuk bekerja, dan bahkan kemudian cenderung memiliki baris heading dan baris tubuh tidak selaras di berbagai browser.

Saya sarankan menggigit peluru dan menggunakan kontrol grid yang tepat seperti jsGrid atau favorit pribadi saya, SlickGrid . Ini jelas memperkenalkan ketergantungan tetapi jika Anda ingin meja Anda berperilaku seperti kisi-kisi nyata dengan dukungan lintas-peramban, ini akan menghemat Anda menarik rambut Anda. Ini juga memberi Anda pilihan untuk menyortir dan mengubah ukuran kolom plus banyak fitur lainnya jika Anda menginginkannya.

Saran Re Jonathan Wood. Saya tidak memiliki opsi untuk membungkus tabel dengan div baru karena saya menggunakan CMS. Menggunakan JQuery inilah yang saya lakukan:

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

Ini membungkus elemen tabel dengan div baru dengan kelas "table-overflow".

Anda kemudian dapat menambahkan definisi berikut dalam file css Anda:

.table-overflow { overflow: auto; }     

letakkan tabel di dalam div untuk membuat tabel yang dapat digulir secara vertikal. ubah overflow-yuntuk overflow-xmembuat tabel dapat digulir secara horizontal. hanya overflowuntuk membuat tabel dapat digulir baik horisontal maupun vertikal.

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

Kupikir aku akan memposting di sini karena aku tidak bisa mendapatkan yang di atas untuk bekerja dengan Bootstrap 4. Saya menemukan ini online dan bekerja dengan baik untuk saya ...

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;
}

Saya juga memasang jsfindle yang berfungsi.

https://jsfiddle.net/jgngg28t/

Semoga ini bisa membantu orang lain.