Header tabel untuk tetap berada di atas saat pengguna menggulirkannya agar tidak terlihat dengan jQuery

146

Saya mencoba merancang tabel HTML di mana tajuk akan tetap berada di bagian atas halaman saat DAN HANYA saat pengguna menggulirnya keluar dari tampilan. Misalnya, tabel mungkin 500 piksel ke bawah dari halaman, bagaimana cara membuatnya sehingga jika pengguna menggulir header keluar dari tampilan (entah bagaimana browser mendeteksi tidak lagi dalam tampilan windows), itu akan tetap diletakkan di atas ? Adakah yang bisa memberi saya solusi Javascript untuk ini?

<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
  </tbody>
</table>

Jadi pada contoh di atas, saya ingin <thead>menggulir halaman jika tidak terlihat.

PENTING: Saya TIDAK mencari solusi di mana <tbody>akan ada scrollbar (overflow: otomatis).

jquery html html-table Sam Dufel
sumber

2

duplikat? stackoverflow.com/questions/1030043

Brad Tofel

Kemungkinan duplikat header tabel HTML selalu terlihat di atas jendela saat melihat meja besar

Swastik Raj Ghosh

Saya menjawab ini untuk pertanyaan lain, silakan lihat. stackoverflow.com/a/56764334/9388978

Ersel Aktas

131

Anda akan melakukan sesuatu seperti ini dengan mengetuk scrollevent handler window, dan menggunakan yang lain tabledengan posisi tetap untuk menampilkan header di bagian atas halaman.

HTML:

<table id="header-fixed"></table>

CSS:

#header-fixed {
    position: fixed;
    top: 0px; display:none;
    background-color:white;
}

JavaScript:

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();

    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
    }
    else if (offset < tableOffset) {
        $fixedHeader.hide();
    }
});

Ini akan menampilkan kepala tabel saat pengguna menggulir ke bawah cukup jauh untuk menyembunyikan kepala tabel asli. Ini akan bersembunyi lagi ketika pengguna telah menggulir halaman cukup jauh lagi.

Contoh kerja: http://jsfiddle.net/andrewwhitaker/fj8wM/

Andrew Whitaker
sumber

60

Saya memikirkan hal ini tetapi bagaimana jika lebar kolom header berubah berdasarkan konten? Jika lebar kolom tidak diperbaiki, Anda bisa membuat baris tajuk Anda tidak sejajar dengan baris konten. Hanya pemikiran saja.

Yzmir Ramirez

16

contoh ini tidak berfungsi jika nama header kolom lebih pendek dari nilai data kolom. Coba ubah biola itu agar memiliki nilai seperti infoooooooo alih-alih info. Saya sedang berpikir semacam lebar hardcoded yang ditetapkan saat mengkloning tabel.

whiterook6

6

Ini memiliki keterbatasan utama, paling tidak ketika mencoba menggunakan tabel dalam wadah selain window. mkoryak.github.io/floatThead memiliki solusi yang lebih umum berlaku.

Yuck

13

Ini mungkin membantu siapa saja yang membutuhkan lebar dinamis, apa yang akhirnya saya lakukan, itu adalah garpu dari @AndrewWhitaker: jsfiddle.net/noahkoch/wLcjh/1

Noah Koch

1

@NoahKoch tajuk tetap menggunakan solusi Anda mungkin masih tidak selebar kepala asli ketika sel-sel asli memiliki padding. Saya meningkatkan solusi Anda untuk menambahkan padding ke sel yang digandakan. Garpu JSFiddle

fandasson

47

CSS murni (tanpa dukungan IE11):

table th {
    position: -webkit-sticky; // this is for all Safari (Desktop & iOS), not for Chrome
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
}

Ihor Zenich
sumber

1

Saya bahkan tidak melihat ini berfungsi di Chrome. Alat inspeksi ditampilkan -webkit-stickysebagai nilai yang tidak valid untuk position.

carmenisme

@carmenism -webkit-stickyuntuk Safari (Desktop & iOS), bukan untuk Chrome. position: stickyberfungsi di Chrome dari versi 56. Anda harus menetapkan aturan KEDUA: -webkit-stickydan stickypersis dalam urutan yang sama seperti dalam contoh kode saya. Safari dapat webkit-stickydan semua browser lain menimpanya sticky.

Ihor Zenich

2

Saya tidak dapat menjalankannya. Dari google cepat sepertinya position: stickytidak akan bekerja dengan elemen tabel.

rjh

3

melamar saya bekerja untuk saya: table thead tr th {...}

nurp

1

Anda harus menerapkannya pada th karena itu tidak akan bekerja pada thead atau tr

helado

46

Yah, saya mencoba untuk mendapatkan efek yang sama tanpa menggunakan kolom ukuran tetap atau memiliki ketinggian tetap untuk seluruh tabel.

Solusi yang saya temukan adalah hack. Terdiri dari menduplikasi seluruh tabel kemudian menyembunyikan semuanya kecuali header, dan membuatnya memiliki posisi tetap.

HTML

<div id="table-container">
<table id="maintable">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>some really long line here instead</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
                <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
                <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
    </tbody>
</table>
<div id="bottom_anchor"></div>
</div>

CSS

body { height: 1000px; }
thead{
    background-color:white;
}

javascript

function moveScroll(){
    var scroll = $(window).scrollTop();
    var anchor_top = $("#maintable").offset().top;
    var anchor_bottom = $("#bottom_anchor").offset().top;
    if (scroll>anchor_top && scroll<anchor_bottom) {
    clone_table = $("#clone");
    if(clone_table.length == 0){
        clone_table = $("#maintable").clone();
        clone_table.attr('id', 'clone');
        clone_table.css({position:'fixed',
                 'pointer-events': 'none',
                 top:0});
        clone_table.width($("#maintable").width());
        $("#table-container").append(clone_table);
        $("#clone").css({visibility:'hidden'});
        $("#clone thead").css({'visibility':'visible','pointer-events':'auto'});
    }
    } else {
    $("#clone").remove();
    }
}
$(window).scroll(moveScroll);

Lihat di sini: http://jsfiddle.net/QHQGF/7/

Sunting: memperbarui kode sehingga thead dapat menerima peristiwa pointer (sehingga tombol dan tautan di header masih berfungsi). Ini memperbaiki masalah yang dilaporkan oleh luhfluh dan Joe M.

Jsfiddle baru di sini: http://jsfiddle.net/cjKEx/

entropi
sumber

3

Saya mencoba yang pertama, masalah dengan itu adalah bahwa ukuran elemen di header tergantung pada isi tabel. Jika Anda memiliki baris dengan konten besar, seluruh kolom, termasuk tajuk akan bertambah. Jika Anda mengkloning thead saja Anda kehilangan informasi itu dan Anda tidak mendapatkan efek yang diinginkan. Lihat komentar Yzmir Ramirez tentang jawaban yang diterima. Ini adalah satu-satunya cara saya menemukan yang berfungsi tanpa kolom lebar tetap. Itu tidak bersih, saya tahu, yang menurut saya itu adalah peretasan.

entropi

1

Oh saya mengerti. Metode ini hebat karena berfungsi dengan kolom cairan, saya sedikit googled dan tidak dapat menemukan yang lain dengan fungsi itu. Bagaimanapun, jika saya akan menyelesaikannya entah bagaimana, saya akan menyebutkannya di sini

M2_

1

@ luhfluh, ya, masalahnya karena pointer-events: tidak ada di tabel kloning. Ini digunakan agar klik melalui klon dan ke tabel asli. Mengembalikannya di header tabel kloning sehingga header (dan hanya header) dapat diklik memperbaiki masalah. Saya telah memperbarui posting saya untuk mencerminkan ini :)

entropi

4

masalah menambahkan batas pada <thead> <th>

Jam Ville

1

@ JamVille Karena meja kloning telah visibility: hidden. Anda hanya dapat bersembunyi #clone tbodydan setelah itu Anda dapat mengatur perbatasan ... Bekerja biola: jsfiddle.net/QHQGF/1707

Lajdák Marek

26

Saya menulis sebuah plugin yang melakukan ini. Saya sudah bekerja di sana selama sekitar satu tahun sekarang dan saya pikir itu menangani semua kasus sudut dengan cukup baik:

gulir dalam wadah dengan overflow
bergulir di dalam jendela
urus apa yang terjadi ketika Anda mengubah ukuran jendela
menjaga acara Anda terikat pada tajuk
yang paling penting itu tidak memaksa Anda untuk mengubah css meja Anda untuk membuatnya berfungsi

Berikut ini beberapa demo / dokumen:
http://mkoryak.github.io/floatThead/

mkoryak
sumber

usaha keras, tetapi tidak bekerja dengan IE 10 dan memiliki beberapa kebiasaan mengubah ukuran windows di firefox23 / ubuntu.

Janning

2

FYI: saya memperbaiki masalah dengan IE9 dan 10 di versi terbaru.

mkoryak

2

Bisakah Anda membuat versi yang tidak memerlukan jQuery?

Curtis W

2

mungkin karena dia tidak menggunakan jquery ... dan tidak - saya tidak akan membuat versi yang tidak menggunakan jquery.

mkoryak

1

Saya menggunakan plugin tablesorter jQery sederhana dan sesuai dengan FAQ Anda, plugin Anda tidak menyukai sebagian besar aturan CSS seperti #sortable td {..} dan sebagainya. Saya mencoba untuk mengubah sedikit tetapi saya tidak bisa membuatnya bekerja.

masche

25

Saya dapat memperbaiki masalah dengan mengubah lebar kolom. Saya mulai dengan solusi Andrew di atas (terima kasih banyak!) Dan kemudian menambahkan satu lingkaran kecil untuk mengatur lebar td kloning:

$("#header-fixed td").each(function(index){
    var index2 = index;
    $(this).width(function(index2){
        return $("#table-1 td").eq(index).width();
    });
});

Ini menyelesaikan masalah tanpa harus mengkloning seluruh tabel dan menyembunyikan tubuh. Saya baru mengenal JavaScript dan jQuery (dan untuk menumpuk yang melimpah), jadi ada komentar yang dihargai.

rockusbacchus
sumber

4

Bekerja dengan baik tetapi saya perlu menambahkan baris berikut $ ("# header-fix"). Width ($ ("# table-1"). Width ()); untuk kolom berbaris dengan benar.

Ilya Fedotov

17

Sejauh ini, ini adalah solusi terbaik yang saya temukan untuk memiliki header tabel tetap.

UPDATE 5/11: Memperbaiki bug pengguliran horizontal seperti yang ditunjukkan oleh Kerry Johnson

Codepen: https://codepen.io/josephting/pen/demELL

;(function($) {
   $.fn.fixMe = function() {
      return this.each(function() {
         var $this = $(this),
            $t_fixed;
         function init() {
            $this.wrap('<div class="container" />');
            $t_fixed = $this.clone();
            $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
            resizeFixed();
         }
         function resizeFixed() {
           $t_fixed.width($this.outerWidth());
            $t_fixed.find("th").each(function(index) {
               $(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
            });
         }
         function scrollFixed() {
            var offsetY = $(this).scrollTop(),
            offsetX = $(this).scrollLeft(),
            tableOffsetTop = $this.offset().top,
            tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height(),
            tableOffsetLeft = $this.offset().left;
            if(offsetY < tableOffsetTop || offsetY > tableOffsetBottom)
               $t_fixed.hide();
            else if(offsetY >= tableOffsetTop && offsetY <= tableOffsetBottom && $t_fixed.is(":hidden"))
               $t_fixed.show();
            $t_fixed.css("left", tableOffsetLeft - offsetX + "px");
         }
         $(window).resize(resizeFixed);
         $(window).scroll(scrollFixed);
         init();
      });
   };
})(jQuery);

$(document).ready(function(){
   $("table").fixMe();
   $(".up").click(function() {
      $('html, body').animate({
      scrollTop: 0
   }, 2000);
 });
});

body{
  font:1.2em normal Arial,sans-serif;
  color:#34495E;
}

h1{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:-2px;
  font-size:2.5em;
  margin:20px 0;
}

.container{
  width:90%;
  margin:auto;
}

table{
  border-collapse:collapse;
  width:100%;
}

.blue{
  border:2px solid #1ABC9C;
}

.blue thead{
  background:#1ABC9C;
}

.purple{
  border:2px solid #9B59B6;
}

.purple thead{
  background:#9B59B6;
}

thead{
  color:white;
}

th,td{
  text-align:center;
  padding:5px 0;
}

tbody tr:nth-child(even){
  background:#ECF0F1;
}

tbody tr:hover{
background:#BDC3C7;
  color:#FFFFFF;
}

.fixed{
  top:0;
  position:fixed;
  width:auto;
  display:none;
  border:none;
}

.scrollMore{
  margin-top:600px;
}

.up{
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>&darr; SCROLL &darr;</h1>
<table class="blue">
  <thead>
    <tr>
      <th>Colonne 1</th>
      <th>Colonne 2</th>
      <th>Colonne 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Non</td>
      <td>MaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
       <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
  </tbody>
</table>

<h1 class="scrollMore">&darr; SCROLL MORE &darr;</h1>
<table class="purple">
  <thead>
    <tr>
      <th>Colonne 1</th>
      <th>Colonne 2</th>
      <th>Colonne 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
       <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
       <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
  </tbody>
</table>
<h1 class="up scrollMore">&uarr; UP &uarr;</h1>

Luaskan cuplikan

Yosefting
sumber

Saya memperbaiki skrip ini sehingga dapat menangani elemen <th> yang memiliki batas dan bantalan (jika tidak, set header tetap <th> terlalu lebar). Cukup ubah outerWidthke widthdalam definisi fungsi resizeFixed ().

alanng

Anda juga mungkin perlu menambahkan properti CSS z-indexke beberapa angka positif di .fixedkelas sehingga objek yang diberikan pasca-pageload di tabel tidak mengapung di atas header tetap saat Anda menggulir.

alanng

Sederhana dan bermanfaat.

RitchieD

bagaimana menangani posisi teratas secara dinamis. Katakanlah, saya perlu gulir ke atas di bawah halaman utama saya konten tajuk tetap. .fixed {top: 0;} .

VijayVishnu

2

@KerryJohnson Terima kasih atas catatannya. Saya telah membuat beberapa perubahan sehingga mendukung pengguliran horizontal dan lebar kolom dinamis.

menyanyi

7

Solusi terbaik adalah dengan menggunakan plugin jquery ini:

https://github.com/jmosbech/StickyTableHeaders

Plugin ini bekerja sangat baik untuk kami dan kami mencoba banyak solusi lain. Kami mengujinya di IE, Chrome dan Firefox

Janning
sumber

Apakah Anda tahu solusi apa pun yang juga mempertahankan fungsi kontrol terikat data KO di header?

Csaba Toth

Tidak berfungsi untuk saya: header ada di luar meja dan tetap di atas browser (jendela), bahkan dengan opsi "scrollableArea". Saya melihat bahwa ini disebutkan sebelumnya tanpa komentar tambahan. Mungkin perlu CSS yang dia gunakan dan tidak tersedia untuk membuatnya bekerja.

Exel Gamboa

6

Ada banyak solusi yang sangat bagus di sini. Tetapi salah satu solusi CSS saja yang paling sederhana yang saya gunakan dalam situasi ini adalah sebagai berikut:

table {
  /* Not required only for visualizing */
  border-collapse: collapse;
  width: 100%;
}

table thead tr th {
  /* Important */
  background-color: red;
  position: sticky;
  z-index: 100;
  top: 0;
}

td {
  /* Not required only for visualizing */
  padding: 1em;
}

<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
  </tbody>
</table>

Luaskan cuplikan

Karena tidak ada persyaratan untuk JavaScript, ini menyederhanakan situasi secara signifikan. Anda pada dasarnya perlu fokus pada yang kedua aturan CSS , yang berisi ketentuan untuk memastikan bahwa kepala tabel tetap berada di atas, tidak peduli ruang gulir.

Untuk menguraikan masing-masing aturan secara rinci. positiondimaksudkan untuk menunjukkan kepada browser bahwa objek kepala, barisnya, dan sel-selnya semua harus menempel di atas. Ini perlu disertai top, yang menentukan ke browser bahwa kepala akan menempel pada bagian atas halaman atau viewport. Selain itu, Anda dapat menambahkanz-index untuk memastikan bahwa konten kepala selalu tetap di atas.

Warna latar belakang hanyalah untuk menggambarkan titik. Anda tidak perlu menggunakan JavaScript tambahan untuk mendapatkan efek ini. Ini didukung di sebagian besar browser utama setelah 2016.

Srivats Shankar
sumber

1

imo jawaban yang sederhana dan terbersih, selalu ada cara sederhana untuk menyelesaikan satu masalah, inilah masalahnya. Meskipun saya menggunakan ng-repeat dengan angularjs itu berfungsi seperti pesona.

David Castro

5

Saya menemukan perpustakaan jQuery sederhana bernama Sticky Table Headers. Dua baris kode dan itu melakukan apa yang saya inginkan. Solusi di atas tidak mengelola lebar kolom, jadi jika Anda memiliki sel tabel yang membutuhkan banyak ruang, ukuran yang dihasilkan dari header persisten tidak akan cocok dengan lebar tabel Anda.

http://plugins.jquery.com/StickyTableHeaders/

Info penggunaan di sini: https://github.com/jmosbech/StickyTableHeaders

Lok Yan Wong
sumber

3

Nah, setelah meninjau semua solusi yang tersedia saya menulis plugin yang dapat membekukan setiap baris (tidak hanya th) di bagian atas halaman atau wadah. Ini sangat sederhana dan sangat cepat. Jangan ragu untuk menggunakannya. http://maslianok.github.io/stickyRows/

Vitalii Maslianok
sumber

3

Anda dapat menggunakan pendekatan ini, HTML murni dan CSS tanpa JS diperlukan :)

.table-fixed-header {
  display: flex;
  justify-content: space-between;
  margin-right: 18px
}

.table-fixed {
  display: flex;
  justify-content: space-between;
  height: 150px;
  overflow: scroll;
}

.column {
  flex-basis: 24%;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
}
.column .title {
  border-bottom: 2px grey solid;
  border-top: 2px grey solid;
  text-align: center;
  display: block;
  font-weight: bold;
}

.cell {
  padding: 5px;
  border-right: 1px solid;
  border-left: 1px solid;
}

.cell:nth-of-type(even) {
  background-color: lightgrey;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Fixed header Bin</title>
</head>
<body>
<div class="table-fixed-header">
    
    <div class="column">
      <span class="title">col 1</span>
    </div>
    <div class="column">
      <span class="title">col 2</span>
    </div>
    <div class="column">
      <span class="title">col 3</span>
    </div>
    <div class="column">
      <span class="title">col 4</span>
    </div>
    
  </div>
  
  <div class="table-fixed">
    
    <div class="column">
      <div class="cell">alpha</div>
      <div class="cell">beta</div>
      <div class="cell">ceta</div>
    </div>
    
    <div class="column">
      <div class="cell">alpha</div>
      <div class="cell">beta</div>
      <div class="cell">ceta</div>
      <div class="cell">alpha</div>
      <div class="cell">beta</div>
      <div class="cell">ceta</div>
      <div class="cell">alpha</div>
      <div class="cell">beta</div>
      <div class="cell">ceta</div>
    </div>
    
    <div class="column">
      <div class="cell">alpha</div>
      <div class="cell">beta</div>
      <div class="cell">ceta</div>
      <div class="cell">beta</div>
      <div class="cell">beta</div>
      <div class="cell">beta</div>
      
    </div>
    
    <div class="column">
      <div class="cell">alpha</div>
      <div class="cell">beta</div>
      <div class="cell">ceta</div>
    </div>
    
  </div>
</body>
</html>

Luaskan cuplikan

xelilof
sumber

3

Saya menemukan solusi sederhana tanpa menggunakan JQuery dan hanya menggunakan CSS .

Anda harus meletakkan konten tetap di dalam tag 'th' dan menambahkan CSS

table th {
    position:sticky;
    top:0;
    z-index:1;
    border-top:0;
    background: #ededed;
}

Posisi, z-index dan properti teratas sudah cukup. Tetapi Anda dapat menerapkan sisanya untuk memberikan tampilan yang lebih baik.

Abhi Das
sumber

2

Saya juga mengalami masalah yang sama dengan pemformatan perbatasan tidak ditampilkan menggunakan kode entrophy tetapi beberapa perbaikan kecil dan sekarang tabel dapat diperluas dan menampilkan semua aturan styling css yang dapat Anda tambahkan.

untuk menambahkan css:

#maintable{width: 100%}

maka di sini adalah javascript baru:

    function moveScroll(){
    var scroll = $(window).scrollTop();
    var anchor_top = $("#maintable").offset().top;
    var anchor_bottom = $("#bottom_anchor").offset().top;
    if (scroll > anchor_top && scroll < anchor_bottom) {
        clone_table = $("#clone");
        if(clone_table.length === 0) {          
            clone_table = $("#maintable").clone();
            clone_table.attr({id: "clone"})
            .css({
                position: "fixed",
                "pointer-events": "none",
                 top:0
            })
            .width($("#maintable").width());

            $("#table-container").append(clone_table);
            // dont hide the whole table or you lose border style & 
            // actively match the inline width to the #maintable width if the 
            // container holding the table (window, iframe, div) changes width          
            $("#clone").width($("#maintable").width());
            // only the clone thead remains visible
            $("#clone thead").css({
                visibility:"visible"
            });
            // clone tbody is hidden
            $("#clone tbody").css({
                visibility:"hidden"
            });
            // add support for a tfoot element
            // and hide its cloned version too
            var footEl = $("#clone tfoot");
            if(footEl.length){
                footEl.css({
                    visibility:"hidden"
                });
            }
        }
    } 
    else {
        $("#clone").remove();
    }
}
$(window).scroll(moveScroll);

seeit360
sumber

Ini berfungsi lebih baik daripada solusi entropi sejauh pemformatan perbatasan berjalan di header. Namun, di Firefox saat ini (tetapi bukan Chrome) itu menciptakan artefak batas sel yang terlihat di bawah tabel setelah pengguliran dimulai.

alanng

2

Inilah solusi yang dibangun berdasarkan jawaban yang diterima. Itu mengoreksi untuk: lebar kolom, gaya tabel yang cocok, dan ketika tabel digulir dalam wadah div.

Pemakaian

Pastikan tabel Anda memiliki <thead>tag karena hanya konten yang ditambahkan yang akan diperbaiki.

$("#header-fixed").fixHeader();

JavaSript

//Custom JQuery Plugin
(function ($) {
    $.fn.fixHeader = function () {
        return this.each(function () {
            var $table = $(this);
            var $sp = $table.scrollParent();
            var tableOffset = $table.position().top;
            var $tableFixed = $("<table />")
                .prop('class', $table.prop('class'))
                .css({ position: "fixed", "table-layout": "fixed", display: "none", "margin-top": "0px" });
            $table.before($tableFixed);
            $tableFixed.append($table.find("thead").clone());

            $sp.bind("scroll", function () {
                var offset = $(this).scrollTop();

                if (offset > tableOffset && $tableFixed.is(":hidden")) {
                    $tableFixed.show();
                    var p = $table.position();
                    var offset = $sp.offset();

                    //Set the left and width to match the source table and the top to match the scroll parent
                    $tableFixed.css({ left: p.left + "px", top: (offset ? offset.top : 0) + "px", }).width($table.width());

                    //Set the width of each column to match the source table
                    $.each($table.find('th, td'), function (i, th) {
                        $($tableFixed.find('th, td')[i]).width($(th).width());
                    });

                }
                else if (offset <= tableOffset && !$tableFixed.is(":hidden")) {
                    $tableFixed.hide();
                }
            });
        });
    };
})(jQuery);

Ben Gripka
sumber

1

Ini bekerja dengan baik untuk saya. Satu-satunya masalah adalah masalah dengan tabel yang perlu digulir secara horizontal. Saya telah membuat pembaruan dalam JSFiddle di sini jsfiddle.net/4mgneob1/1 Saya kurangi $sp.scrollLeft()yang mendapatkan jumlah yang digulir dari kiri sehingga ketika menggulir ke bawah tabel tetap diposisikan dengan benar. Juga ditambahkan periksa ketika menggulir secara horizontal jika tabel tetap terlihat untuk menyesuaikan posisi kiri. Masalah lain yang tidak bisa saya pecahkan adalah ketika tabel berjalan di atas viewport, tabel tetap harus disembunyikan sampai pengguna menggulir mundur.

Henesnarfel

1

MendapatkanUncaught TypeError: $table.scrollParent is not a function

karlingen

1

Ini akan membantu Anda memiliki tajuk tetap yang juga dapat digulir secara horizontal dengan data.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Shubh</title>



<script type="text/javascript">
    var lastSeen = [ 0, 0 ];
    function checkScroll(div1, div2) {
        if (!div1 || !div2)
            return;
        var control = null;
        if (div1.scrollLeft != lastSeen[0])
            control = div1;
        else if (div2.scrollLeft != lastSeen[1])
            control = div2;
        if (control == null)
            return;
        else
            div1.scrollLeft = div2.scrollLeft = control.scrollLeft;
        lastSeen[0] = div1.scrollLeft;
        lastSeen[1] = div2.scrollLeft;
    }

    window
            .setInterval(
                    "checkScroll(document.getElementById('innertablediv'), document.getElementById('headertable'))",
                    1);
</script>

<style type="text/css">
#full {
    width: 400px;
    height: 300px;
}

#innertablediv {
    height: 200px;
    overflow: auto;
}

#headertable {
    overflow: hidden;
}
</style>
</head>
<body>

    <div id="full">




        <div id="headertable">
            <table border="1" bgcolor="grey" width="150px" id="headertable">
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>

                    <td>&nbsp;&nbsp;&nbsp;</td>
                </tr>

            </table>
        </div>




        <div id="innertablediv">

            <table border="1" id="innertableid">
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>

            </table>
        </div>
    </div>
</body>
</html>

pengguna2669926
sumber

Ini akan membantu Anda memiliki tajuk tetap yang juga dapat digulir secara horizontal dengan data.

user2669926

1

function fix_table_header_position(){
 var width_list = [];
 $("th").each(function(){
    width_list.push($(this).width());
 });
 $("tr:first").css("position", "absolute");
 $("tr:first").css("z-index", "1000");
 $("th, td").each(function(index){
    $(this).width(width_list[index]);
 });

 $("tr:first").after("<tr height=" + $("tr:first").height() + "></tr>");}

Ini solusi saya

Hanya kita
sumber

1

Agak terlambat ke pesta, tapi di sini ada implementasi yang bekerja dengan beberapa tabel pada halaman yang sama dan "jank" gratis (menggunakan requestAnimationFrame). Juga tidak perlu memberikan lebar pada kolom. Pengguliran horizontal juga berfungsi.

Header didefinisikan dalam divsehingga Anda bebas untuk menambahkan markup apa pun di sana (seperti tombol), jika diperlukan. Ini semua HTML yang dibutuhkan:

<div class="tbl-resp">
  <table id="tbl1" class="tbl-resp__tbl">
     <thead>
      <tr>
        <th>col 1</th>
        <th>col 2</th>
        <th>col 3</th>
      </tr>
    </thead> 
  </table>
</div>

https://jsfiddle.net/lloydleo/bk5pt5gs/

Leo
sumber

1

Dalam solusi ini, header tetap dibuat secara dinamis, konten dan gaya diklon dari THEAD

yang Anda butuhkan adalah dua baris misalnya:

var $myfixedHeader = $("#Ttodo").FixedHeader(); //create fixed header $(window).scroll($myfixedHeader.moveScroll); //bind function to scroll event

Plugin jquery saya, FixedHeader dan getStyleObject yang disediakan di bawah ini dapat Anda masukkan ke dalam file .js

// JAVASCRIPT



/*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 
Basic usage:
$.fn.copyCSS = function(source){
  var styles = $(source).getStyleObject();
  this.css(styles);
}
*/

(function($){
    $.fn.getStyleObject = function(){
        var dom = this.get(0);
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            };
            style = window.getComputedStyle(dom, null);
            for(var i = 0, l = style.length; i < l; i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            };
            return returns;
        };
        if(style = dom.currentStyle){
            for(var prop in style){
                returns[prop] = style[prop];
            };
            return returns;
        };
        return this.css();
    }
})(jQuery);



   
//Floating Header of long table  PiotrC
(function ( $ ) {
    var tableTop,tableBottom,ClnH;
    $.fn.FixedHeader = function(){
        tableTop=this.offset().top,
        tableBottom=this.outerHeight()+tableTop;
        //Add Fixed header
        this.after('<table id="fixH"></table>');
        //Clone Header
        ClnH=$("#fixH").html(this.find("thead").clone());
        //set style
        ClnH.css({'position':'fixed', 'top':'0', 'zIndex':'60', 'display':'none',
        'border-collapse': this.css('border-collapse'),
		'border-spacing': this.css('border-spacing'),
        'margin-left': this.css('margin-left'),
        'width': this.css('width')            
        });
        //rewrite style cell of header
        $.each(this.find("thead>tr>th"), function(ind,val){
            $(ClnH.find('tr>th')[ind]).css($(val).getStyleObject());
        });
    return ClnH;}
    
    $.fn.moveScroll=function(){
        var offset = $(window).scrollTop();
        if (offset > tableTop && offset<tableBottom){
            if(ClnH.is(":hidden"))ClnH.show();
            $("#fixH").css('margin-left',"-"+$(window).scrollLeft()+"px");
        }
        else if (offset < tableTop || offset>tableBottom){
            if(!ClnH.is(':hidden'))ClnH.hide();
        }
    };
})( jQuery );





var $myfixedHeader = $("#repTb").FixedHeader();
$(window).scroll($myfixedHeader.moveScroll);

/* CSS - important only NOT transparent background */

#repTB{border-collapse: separate;border-spacing: 0;}

#repTb thead,#fixH thead{background: #e0e0e0 linear-gradient(#d8d8d8 0%, #e0e0e0 25%, #e0e0e0 75%, #d8d8d8 100%) repeat scroll 0 0;border:1px solid #CCCCCC;}

#repTb td{border:1px solid black}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<h3>example</h3> 
<table id="repTb">
<thead>
<tr><th>Col1</th><th>Column2</th><th>Description</th></tr>
</thead>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
</table>

Luaskan cuplikan

Piotr C.
sumber

1

Buat tabel tambahan dengan header yang sama dengan tabel utama. Cukup letakkan thead di tabel baru dengan satu baris dan semua header di dalamnya. Lakukan posisi absolut dan latar belakang putih. Untuk tabel utama, letakkan dalam div dan gunakan beberapa scroll tinggi dan overflow-y. Dengan cara ini tabel baru kami akan mengatasi tajuk tabel utama dan tetap di sana. Kelilingi semuanya dalam div. Di bawah ini adalah kode kasar untuk melakukannya.

      <div class="col-sm-8">

        <table id="header-fixed" class="table table-bordered table-hover" style="width: 351px;position: absolute;background: white;">
        <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
      </table>


    <div style="height: 300px;overflow-y: scroll;">
          <table id="tableMain" class="table table-bordered table-hover" style="table-layout:fixed;overflow-wrap: break-word;cursor:pointer">
<thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
  </tbody>

                                    </table>
              </div>
        </div>

Novice_JS
sumber

1

div.wrapper {
    padding:20px;
}
table.scroll thead {
    width: 100%;
    background: #FC6822;
}
table.scroll thead tr:after {
    content: '';
    overflow-y: scroll;
    visibility: hidden;
}
table.scroll thead th {
    flex: 1 auto;
    display: block;
    color: #fff;
}
table.scroll tbody {
    display: block;
    width: 100%;
    overflow-y: auto;
    height: auto;
    max-height: 200px;
}
table.scroll thead tr,
table.scroll tbody tr {
    display: flex;
}
table.scroll tbody tr td {
    flex: 1 auto;
    word-wrap: break;
}
table.scroll thead tr th,
table.scroll tbody tr td {
    width: 25%;
    padding: 5px;
    text-align-left;
    border-bottom: 1px solid rgba(0,0,0,0.3);
}

<div class="wrapper">
    <table border="0" cellpadding="0" cellspacing="0" class="scroll">
        <thead>
            <tr>
                <th>Name</th>
                <th>Vorname</th>
                <th>Beruf</th>
                <th>Alter</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Müller</td>
                <td>Marie</td>
                <td>Künstlerin</td>
                <td>26</td>
            </tr>
            <tr>
                <td>Meier</td>
                <td>Stefan</td>
                <td>Chemiker</td>
                <td>52</td>
            </tr>
            <tr>
                <td>Schmidt</td>
                <td>Sabrine</td>
                <td>Studentin</td>
                <td>38</td>
            </tr>
            <tr>
                <td>Mustermann</td>
                <td>Max</td>
                <td>Lehrer</td>
                <td>41</td>
            </tr>
            <tr>
                <td>Müller</td>
                <td>Marie</td>
                <td>Künstlerin</td>
                <td>26</td>
            </tr>
            <tr>
                <td>Meier</td>
                <td>Stefan</td>
                <td>Chemiker</td>
                <td>52</td>
            </tr>
            <tr>
                <td>Schmidt</td>
                <td>Sabrine</td>
                <td>Studentin</td>
                <td>38</td>
            </tr>
            <tr>
                <td>Mustermann</td>
                <td>Max</td>
                <td>Lehrer</td>
                <td>41</td>
            </tr>
            <tr>
                <td>Müller</td>
                <td>Marie</td>
                <td>Künstlerin</td>
                <td>26</td>
            </tr>
            <tr>
                <td>Meier</td>
                <td>Stefan</td>
                <td>Chemiker</td>
                <td>52</td>
            </tr>
            <tr>
                <td>Schmidt</td>
                <td>Sabrine</td>
                <td>Studentin</td>
                <td>38</td>
            </tr>
            <tr>
                <td>Mustermann</td>
                <td>Max</td>
                <td>Lehrer</td>
                <td>41</td>
            </tr>
        </tbody>
    </table>
</div>

Luaskan cuplikan

Demo: demo tajuk tabel tetap css

revilodesign.de
sumber

1

Perbaiki masalah Anda dengan ini

tbody {
  display: table-caption;
  height: 200px;
  caption-side: bottom;
  overflow: auto;
}

J Benjamín Samayoa
sumber

0

Ini dapat dicapai dengan menggunakan transformasi properti gaya. Yang harus Anda lakukan adalah membungkus meja Anda menjadi beberapa div dengan ketinggian tetap dan overflow diatur ke otomatis, misalnya:

.tableWrapper {
  overflow: auto;
  height: calc( 100% - 10rem );
}

Dan kemudian Anda dapat melampirkan pengendali onscroll ke sana, di sini Anda memiliki metode yang menemukan setiap tabel dibungkus dengan <div class="tableWrapper"></div>:

  fixTables () {
    document.querySelectorAll('.tableWrapper').forEach((tableWrapper) => {
      tableWrapper.addEventListener('scroll', () => {
        var translate = 'translate(0,' + tableWrapper.scrollTop + 'px)'
        tableWrapper.querySelector('thead').style.transform = translate
      })
    })
  }

Dan berikut ini contoh kerja dari tindakan ini (saya telah menggunakan bootstrap untuk membuatnya lebih cantik): biola

Bagi mereka yang juga ingin mendukung IE dan Edge, berikut cuplikannya:

  fixTables () {
    const tableWrappers = document.querySelectorAll('.tableWrapper')
    for (let i = 0, len = tableWrappers.length; i < len; i++) {
      tableWrappers[i].addEventListener('scroll', () => {
        const translate = 'translate(0,' + tableWrappers[i].scrollTop + 'px)'
        const headers = tableWrappers[i].querySelectorAll('thead th')
        for (let i = 0, len = headers.length; i < len; i++) {
          headers[i].style.transform = translate
        }
      })
    }
  }

Di IE dan Edge gulir sedikit laggy ... tapi berhasil

Inilah jawaban yang membantu saya mengetahui hal ini: jawaban

Daniel Budzyński
sumber

0

Saya sudah mencoba sebagian besar solusi ini, dan akhirnya menemukan (IMO) solusi terbaik, modern,:

Kotak CSS

Dengan kisi-kisi CSS, Anda dapat mendefinisikan 'kisi', dan akhirnya Anda dapat membuat solusi lintas-browser yang bagus, bebas javascript, untuk tabel dengan header tetap, dan konten yang dapat digulir. Tinggi tajuk bahkan bisa dinamis.

CSS : Tampilkan sebagai kisi, dan atur jumlah template-rows:

.grid {
    display: grid;
    grid-template-rows: 50px auto; // For fixed height header
    grid-template-rows: auto auto; // For dynamic height header
}

HTML : Buat wadah kotak dan jumlah yang ditentukan rows:

<div class="grid">
    <div></div>
    <div></div>
</div>

Berikut ini contoh kerjanya:

CSS

body {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

.table {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 50px auto;
}
.table-heading {
  background-color: #ddd;
}
.table-content {
  overflow-x: hidden;
  overflow-y: scroll;
}

HTML

<html>
    <head>
    </head>
    <body>
        <div class="table">
            <div class="table-heading">
                HEADING
            </div>
            <div class="table-content">
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
            </div>
        </div>
    </body>
</html>

Jeffrey Roosendaal
sumber

0

Saya telah mencoba menggunakan transformasi: terjemahkan . Meskipun berfungsi baik di Firefox dan Chrome, tidak ada fungsi di IE11. Tidak ada bilah gulir ganda. Mendukung tfoot dan keterangan meja. Javascript murni, tanpa jQuery.

http://jsfiddle.net/wbLqzrfb/42/

thead.style.transform="translate(0,"+(dY-top-1)+"px)";

Henrik Haftmann
sumber

0

Saya menemukan solusi tanpa jquery

HTML

<table class="fixed_header">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 2-0</td>
      <td>row 2-1</td>
      <td>row 2-2</td>
      <td>row 2-3</td>
      <td>row 2-4</td>
    </tr>
    <tr>
      <td>row 3-0</td>
      <td>row 3-1</td>
      <td>row 3-2</td>
      <td>row 3-3</td>
      <td>row 3-4</td>
    </tr>
    <tr>
      <td>row 4-0</td>
      <td>row 4-1</td>
      <td>row 4-2</td>
      <td>row 4-3</td>
      <td>row 4-4</td>
    </tr>
    <tr>
      <td>row 5-0</td>
      <td>row 5-1</td>
      <td>row 5-2</td>
      <td>row 5-3</td>
      <td>row 5-4</td>
    </tr>
    <tr>
      <td>row 6-0</td>
      <td>row 6-1</td>
      <td>row 6-2</td>
      <td>row 6-3</td>
      <td>row 6-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
    </tr>
  </tbody>
</table>

CSS

.fixed_header{
    width: 400px;
    table-layout: fixed;
    border-collapse: collapse;
}

.fixed_header tbody{
  display:block;
  width: 100%;
  overflow: auto;
  height: 100px;
}

.fixed_header thead tr {
   display: block;
}

.fixed_header thead {
  background: black;
  color:#fff;
}

.fixed_header th, .fixed_header td {
  padding: 5px;
  text-align: left;
  width: 200px;
}

Anda dapat melihatnya berfungsi di sini: https://jsfiddle.net/lexsoul/fqbsty3h

Sumber: https://medium.com/@vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc

Lexsoul
sumber

Header tabel untuk tetap berada di atas saat pengguna menggulirkannya agar tidak terlihat dengan jQuery

Jawaban:

HTML

CSS

javascript

Kotak CSS