Bagaimana saya bisa membiarkan tubuh tabel bergulir tetapi tetap kepalanya tetap pada tempatnya?

148

Saya menulis halaman di mana saya membutuhkan tabel HTML untuk mempertahankan ukuran yang ditetapkan. Saya membutuhkan tajuk di bagian atas tabel untuk tetap di sana setiap saat, tetapi saya juga membutuhkan badan tabel untuk menggulir tidak peduli berapa banyak baris yang ditambahkan ke tabel. Pikirkan versi mini excel. Ini sepertinya tugas yang sederhana tetapi hampir setiap solusi yang saya temukan di web memiliki beberapa kelemahan. Bagaimana saya bisa memecahkan masalah ini?

javascript html css html-table minty
sumber
2
ada banyak contoh di luar sana. ini salah satunya .
Darren Kopp
Saya perlu menargetkan IE6, IE7, FF, ... tetapi terutama IE sayangnya
minty
Ada banyak retasan CSS di sana. Seharusnya sepele untuk bisa bekerja di IE7.
Jim
4
Saya tertarik dengan jawaban untuk semua browser!
minty
15
"Seharusnya sepele untuk bisa bekerja di IE7." Jim, apakah itu kamu? Apakah Anda manajer proyek saya? :)
Aaronius

Jawaban:

53

Saya harus menemukan jawaban yang sama. Contoh terbaik yang saya temukan adalah http://www.cssplay.co.uk/menu/tablescroll.html - saya menemukan contoh # 2 bekerja dengan baik bagi saya. Anda harus mengatur ketinggian tabel bagian dalam dengan Java Script, sisanya adalah CSS.

Ken Penn
sumber
3
Sayangnya, metode ini gagal ketika Anda memiliki tabel lebar (gulir horizontal). Anda akan memiliki dua scrollbar horizontal; satu untuk header dan satu untuk data.
vol7ron
4
solusi Anda tidak berfungsi jika Anda tidak menentukan lebar <th> di dalam <thead>
Alexandru R
2
Untuk mematuhi (relatif) standar Stack Overflow baru, dapatkah Anda mengedit jawaban ini untuk memasukkan bit yang relevan dari tautan?
Dana Gugatan Monica
Di mana sumbernya, Billy?
Candjack
Tidak mungkin untuk menyinkronkan lebar kolom antara header dan badan tabel (dapat digulir) tanpa menggunakan JavaScript atau nilai yang ditentukan sebelumnya.
rustyx
34

Saya menemukan DataTables cukup fleksibel. Sementara versi defaultnya didasarkan pada jquery, ada juga plugin AngularJs .

Vitalii Fedorenko
sumber
sangat apik - sebagian besar fungsi berfungsi pada S3 saya, Android 4.0.4, tetapi bukan pencarian / filter
Jens Frandsen
12

Saya melihat solusi sempurna Sean Haddy untuk pertanyaan serupa dan mengambil kebebasan untuk mengedit :

  • Gunakan kelas alih-alih ID, sehingga satu skrip jQuery dapat digunakan kembali untuk beberapa tabel pada satu halaman
  • Menambahkan dukungan untuk elemen tabel HTML semantik seperti caption, thead, tfoot, dan tbody
  • Membuat scrollbar opsional sehingga tidak akan muncul untuk tabel yang "lebih pendek" dari ketinggian yang dapat digulir
  • Disesuaikan lebar scrolling div untuk membawa scrollbar ke tepi kanan meja
  • Membuat konsep dapat diakses oleh
    • menggunakan aria-hidden = "true" pada header tabel statis yang diinjeksi
    • dan meninggalkan thead asli di tempat, hanya disembunyikan dengan jQuery dan set aria-hidden="false"
  • Menampilkan contoh beberapa tabel dengan ukuran berbeda

Tapi Sean yang melakukan angkat berat. Terima kasih juga kepada Matt Burland, karena telah menunjukkan perlunya mendukung langkah.

Silakan lihat sendiri di http://jsfiddle.net/jhfrench/eNP2N/

Jeromy French
sumber
Bagus, tetapi gagal jika Anda ingin header dan footer!
Matt Burland
3
Terima kasih Matt, saya membuat penyesuaian.
Bahasa Prancis Jeromy
Penyelarasan perlu mengubah jika Anda menunjukkan batas td dan th.
dhochee
8

Sudahkah Anda mencoba menggunakan thead dan tbody, dan menetapkan tinggi tetap pada tbody dengan overflow: gulir?

Apa browser target Anda?

EDIT: Ini bekerja dengan baik (hampir) di firefox - penambahan scrollbar vertikal menyebabkan perlunya scrollbar horizontal juga - yuck. Yaitu hanya mengatur tinggi setiap td dengan apa yang saya tentukan ketinggian tbody menjadi. Inilah yang terbaik yang bisa saya pikirkan:

<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
sumber
1
Saya perlu menargetkan IE6, IE7, FF, ... tetapi terutama IE sayangnya
minty
Ubah tabel sehingga lebarnya kurang dari 100%, katakanlah 99% dan itu akan membereskan masalah
WolfmanDragon
2
overflow-x: hidden;dan overflow-y: autojuga membantu.
justkt
7
Ini digunakan untuk bekerja di firefox, dan itu adalah kode yang jelas dan tidak jelas. Namun, di versi firefox yang lebih baru, itu rusak.
Rasmus Kaj
6
Ini tidak berfungsi karena "overflow" hanya berlaku untuk "blokir kontainer" ( w3.org/TR/CSS21/visufx.html#overflow ), dan kotak tabel bukan "blokir kontainer" ( w3.org/TR/CSS21/ visuren.html # blok-kotak ).
mhsmith
8

Yang Anda butuhkan adalah:

1) memiliki badan tabel dengan ketinggian terbatas karena gulir hanya terjadi ketika isinya lebih besar dari jendela gulir. Namun tbodytidak dapat berukuran, dan Anda harus menampilkannya blockuntuk melakukannya:

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

2) Sinkronisasi ulang tajuk tabel dan lebar kolom isi tabel karena menjadikan yang terakhir blockmenjadikannya elemen yang tidak terkait. Satu-satunya cara untuk melakukannya adalah dengan mensimulasikan sinkronisasi dengan menegakkan lebar kolom yang sama untuk keduanya .

Namun, karena tbodyitu sendiri adalah blocksekarang, ia tidak lagi dapat berperilaku seperti table. Karena Anda masih memerlukan tableperilaku untuk menampilkan kolom dengan benar, solusinya adalah meminta setiap baris Anda ditampilkan sebagai masing-masing table:

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

(Perhatikan bahwa, menggunakan teknik ini, Anda tidak akan dapat menjangkau rentang baris lagi).

Setelah itu selesai, Anda dapat menegakkan lebar kolom untuk memiliki lebar yang sama di kedua theaddan tbody. Anda tidak bisa melakukannya:

  • secara individual untuk setiap kolom (melalui kelas CSS tertentu atau gaya inline), yang cukup membosankan untuk dilakukan untuk setiap instance tabel;
  • seragam untuk semua kolom (misalnya th, td { width: 20%; }jika Anda memiliki 5 kolom), yang lebih praktis (tidak perlu mengatur lebar untuk setiap contoh tabel) tetapi tidak dapat berfungsi untuk jumlah kolom apa pun
  • seragam untuk setiap kolom dihitung, melalui tata letak tabel tetap.

Saya lebih suka opsi terakhir, yang membutuhkan penambahan:

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
}

Lihat demo di sini , bercabang dari jawaban untuk pertanyaan ini .

Javarome
sumber
Terima kasih untuk penjelasannya. Ini memesona berapa banyak cara sesuatu seperti ini dapat dilakukan dan sebagian besar jawaban hanya menyajikan beberapa kode dan tautan plunkr, membuat Anda untuk mencari tahu sendiri.
Paul Rooney
4

Sunting:   Ini adalah jawaban yang sangat lama dan ada di sini untuk kemakmuran hanya untuk menunjukkan bahwa itu didukung sekali di tahun 2000-an tetapi turun karena strategi browser di tahun 2010 adalah untuk menghormati spesifikasi W3C bahkan jika beberapa fitur telah dihapus: Tabel digulir dengan tajuk tetap / footer dengan kikuk ditentukan sebelum HTML5.

Kabar buruk

Sayangnya tidak ada cara yang elegan untuk menangani tabel yang dapat digulir dengan tetap thead/ tfoot karena spesifikasi HTML / CSS tidak begitu jelas tentang fitur itu .

Penjelasan

Meskipun Spesifikasi HTML 4.01 mengatakan thead/ tfoot/ tbodydigunakan (diperkenalkan?) Untuk menggulir isi tabel:

Baris tabel dapat dikelompokkan [...] menggunakan elemen THEAD, TFOOT dan TBODY [...]. Divisi ini memungkinkan agen pengguna untuk mendukung pengguliran badan tabel secara independen dari kepala dan kaki meja.

Tetapi fitur tabel yang dapat digulir pada FF 3.6 telah dihapus dalam FF 3.7 karena dianggap sebagai bug karena tidak sesuai dengan spesifikasi HTML / CSS. Lihat ini dan itu komentar tentang bug FF.

Kiat Jaringan Pengembang Mozilla

Di bawah ini adalah versi sederhana dari tips berguna MDN untuk tabel yang dapat digulir,
lihat halaman yang diarsipkan ini atau versi Perancis saat ini

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

Namun MDN juga mengatakan ini tidak berfungsi lagi pada FF :-(
Saya juga telah menguji pada IE8 => tabel juga tidak dapat digulir: - ((

olibre
sumber
Kiat MDN untuk tautan tabel yang dapat digulirkan bukanlah informasi yang relevan yang dibicarakannya tentang batas-keruntuhan. Mungkin halaman diubah karena 5 tahun berlalu
partizanos
Terima kasih @partizanos Saya akhirnya menemukan halaman wiki asli dalam sejarah MDN! Jawaban lama saya tampaknya sudah usang tetapi untuk kemakmuran generasi pengembang berikutnya akan tahu bahwa itu mungkin dan mudah untuk diterapkan kembali di tahun 2000-an ;-) Cheers
olibre
3

Tidak yakin apakah ada orang yang masih melihat ini tetapi cara saya telah melakukan ini sebelumnya adalah menggunakan dua tabel untuk menampilkan tabel asli tunggal - yang pertama hanya baris judul tabel asli dan tidak ada baris tubuh tabel (atau baris tubuh kosong untuk membuat ini valid).

Yang kedua adalah di div terpisah dan tidak memiliki judul dan hanya baris tubuh tabel asli. Div terpisah kemudian dibuat dapat digulir.

Tabel kedua di div diletakkan tepat di bawah tabel pertama di HTML dan terlihat seperti tabel tunggal dengan header tetap dan bagian bawah yang dapat digulir. Saya hanya menguji ini di Safari, Firefox dan IE (masing-masing versi terbaru di Spring 2010) tetapi berhasil di semuanya.

Satu-satunya masalah adalah bahwa tabel pertama tidak akan memvalidasi tanpa badan (validator W3.org - XHTML 1.0 ketat), dan ketika saya menambahkan satu tanpa konten itu menyebabkan baris kosong. Anda dapat menggunakan CSS untuk membuat ini tidak terlihat tetapi masih memakan ruang pada halaman.

Mick
sumber
Bagaimana baris tambahan masih mengambil ruang? Itu tidak harus mengambil ruang layar apa pun jika Anda menggunakan display: none;, kecuali Anda berarti ruang dalam sumber ..?
ClarkeyBoy
3

Solusi ini berfungsi di Chrome 35, Firefox 30 dan IE 11 (tidak menguji versi lain)

CSS murni: http://jsfiddle.net/ffabreti/d4sope1u/

Semuanya diatur untuk ditampilkan: blok, tabel membutuhkan ketinggian:

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

Ini menyebabkan saya sakit kepala yang sangat besar mencoba menerapkan grid seperti itu untuk aplikasi kita. Saya mencoba semua berbagai teknik di luar sana tetapi masing-masing memiliki masalah. Yang paling dekat saya datang menggunakan plugin jQuery seperti Flexigrid (lihat http://www.ajaxrain.com untuk alternatif), tetapi ini tampaknya tidak mendukung tabel lebar 100% yang merupakan apa yang saya butuhkan.

Yang akhirnya saya lakukan adalah menggulirkan milik saya sendiri; Firefox mendukung tbodyelemen pengguliran sehingga saya mengendus browser dan menggunakan CSS yang sesuai (pengaturan tinggi, melimpah dll ... tanyakan apakah Anda ingin lebih detail) untuk membuat gulir itu, dan kemudian untuk browser lain saya menggunakan dua tabel terpisah yang diatur untuk digunakan table-layout: fixedyang menggunakan ukuran Algoritma yang dijamin tidak melimpah ukuran yang dinyatakan (tabel normal akan berkembang ketika konten terlalu lebar untuk muat). Dengan memberikan kedua tabel lebar yang sama, saya bisa membuat kolom mereka berbaris. Saya membungkus yang kedua dalam set div untuk menggulir dan dengan sedikit jiggery pokery dengan margin dll berhasil mendapatkan tampilan dan rasa yang saya inginkan.

Maaf jika jawaban ini terdengar agak kabur di beberapa tempat; Saya menulis dengan cepat karena saya tidak punya banyak waktu. Tinggalkan komentar jika Anda ingin saya memperluas lebih jauh!

Luke Bennett
sumber
Maaf untuk menghidupkan kembali utas lama ini, tetapi saya benar-benar perlu tahu bagaimana Anda mengatasi ini. Saya dapat FF tetapi tidak dengan browser IE / WebKit. Tolong bantu ketika Anda bisa.
Alfero Chingono
2

Berikut kode yang benar-benar berfungsi untuk IE dan FF (setidaknya):

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

Saya telah mengubah kode asli untuk membuatnya lebih jelas dan juga membuatnya bekerja dengan baik di IE dan juga FF ..

Kode asli DI SINI

Daniel Costa
sumber
1
Di IE7 / 8 ini hanya berfungsi dalam Mode Quirks, dan berhenti berfungsi segera setelah Anda menambahkan DOCTYPE, yaitu<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
ccpizza
1

Inilah alternatif saya. Ini juga menggunakan DIV berbeda untuk header, body dan footer tetapi disinkronkan untuk mengubah ukuran jendela dan dengan mencari, menggulir, menyortir, memfilter dan memposisikan:

Daftar CD saya

Klik pada tombol Jazz, Klasik ... untuk melihat tabel. Sudah diatur sehingga memadai meskipun JavaScript dimatikan.

Tampak OK di IE, FF dan WebKit (Chrome, Safari).

hilang
sumber
1

Maaf saya belum membaca semua balasan untuk pertanyaan Anda.

Ya di sini hal yang Anda inginkan (sudah saya lakukan)

Anda dapat menggunakan dua tabel, dengan nama kelas yang sama untuk gaya yang sama, satu hanya dengan kepala meja dan yang lainnya dengan baris Anda. Sekarang letakkan tabel ini di dalam div yang memiliki ketinggian tetap dengan overflow-y: auto ATAU gulir.

Sanuj
sumber
1

Masalah utama yang saya miliki dengan saran di atas adalah bisa pasang tablesorter.js DAN mampu mengapung header untuk tabel dibatasi ke ukuran maks tertentu. Saya akhirnya menemukan plugin jQuery.floatThead yang menyediakan header mengambang dan memungkinkan penyortiran untuk terus bekerja.

Ini juga memiliki halaman perbandingan yang bagus yang menunjukkan dirinya vs plugin serupa .

Guy Hollington
sumber
1

JsFiddle hidup

Itu mungkin dengan hanya 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>
Luaskan cuplikan

Md. Rafee
sumber
0

Jika boleh menggunakan JavaScript di sini adalah solusi saya Buat tabel atur lebar tetap pada semua kolom (piksel!) Tambahkan kelas Scrollify ke tabel dan tambahkan javascript + jquery 1.4.x atur tinggi dalam css atau gaya!

Diuji dalam: Opera, Chrome, Safari, FF, IE5.5 ( Skrip epik gagal ), 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);
}

Sunting: Tinggi tetap.

Peter
sumber
0

Saya melakukan ini dengan javascript (tanpa pustaka) dan CSS - tubuh tabel bergulir dengan halaman, dan tabel tidak harus tetap lebar atau tinggi, meskipun setiap kolom harus memiliki lebar. Anda juga dapat menyimpan fungsionalitas penyortiran.

Pada dasarnya:

  1. Dalam HTML, buat div wadah untuk memposisikan baris tajuk tabel dan badan tabel, juga buat div "mask" untuk menyembunyikan isi tabel saat bergulir melewati header.

  2. Di CSS, konversikan bagian tabel menjadi blok

  3. Dalam Javascript, dapatkan lebar tabel dan cocokkan lebar topeng ... dapatkan tinggi konten halaman ... ukur posisi gulir ... manipulasi CSS untuk mengatur posisi baris judul tabel dan tinggi topeng

Inilah javascript dan DEMO jsFiddle.

// 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();
}
Debora
sumber
Namun dalam demo Anda, tajuk tabel tidak tetap ditampilkan, hanya menggulir ke bawah. (Chrome di sini.)
Sz.
Saya tidak melihatnya di Chrome. Apakah Anda yakin tidak salah mengira sel yang disorot kuning dengan instruksi berwarna merah untuk header? Sel header ada di bagian atas dan berwarna abu-abu di atas abu-abu ("Kol 1", "Kol 2", dll.).
Deborah
0

Bagi saya, tidak ada yang terkait dengan pengguliran yang benar-benar berfungsi sampai saya menghapus lebar dari tabel CSS. Awalnya, tabel CSS terlihat seperti ini:

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

Segera setelah saya menghapus lebarnya: 100%; semua fitur gulir mulai berfungsi.

Matthew Park
sumber
0

Jika Anda memiliki standar yang cukup rendah;) Anda bisa menempatkan tabel yang hanya berisi header langsung di atas tabel yang hanya memiliki badan. Ini tidak akan bergulir secara horizontal, tetapi jika Anda tidak membutuhkannya ...

M610
sumber