Header tabel HTML selalu terlihat di atas jendela saat melihat tabel besar

Saya ingin dapat "men-tweak" presentasi tabel HTML untuk menambahkan fitur tunggal: ketika menggulir ke bawah melalui halaman sehingga tabel ada di layar tetapi baris header di luar layar, saya ingin header tetap ada terlihat di bagian atas area tampilan.

Ini akan secara konseptual seperti fitur "panel beku" di Excel. Namun, halaman HTML mungkin berisi beberapa tabel di dalamnya dan saya hanya ingin itu terjadi untuk tabel yang saat ini dalam tampilan, hanya saat sedang dalam tampilan.

Catatan: Saya telah melihat satu solusi di mana area data tabel dibuat dapat digulir sementara header tidak menggulir. Itu bukan solusi yang saya cari.

Lihat jQuery.floatThead ( demo tersedia ) yang sangat keren, dapat bekerja dengan DataTables juga, dan bahkan dapat bekerja di dalam sebuah overflow: autowadah.

Saya telah membuat solusi proof-of-concept menggunakan jQuery .

Lihat sampel di sini.

Saya sekarang mendapatkan kode ini dalam repositori bitbucket Mercurial . File utamanya adalah tables.html.

Saya mengetahui satu masalah dengan ini: jika tabel berisi jangkar, dan jika Anda membuka URL dengan jangkar yang ditentukan di browser, saat halaman dimuat, baris dengan jangkar mungkin akan dikaburkan oleh header mengambang.

Pembaruan 2017-12-11: Saya melihat ini tidak berfungsi dengan Firefox saat ini (57) dan Chrome (63). Tidak yakin kapan dan mengapa ini berhenti bekerja, atau bagaimana cara memperbaikinya. Tapi sekarang, saya pikir jawaban yang diterima oleh Hendy Irawan lebih unggul.

Craig, saya sedikit memperbaiki kode Anda (di antara beberapa hal lainnya sekarang menggunakan posisi: diperbaiki) dan membungkusnya sebagai plugin jQuery.

Cobalah di sini: http://jsfiddle.net/jmosbech/stFcx/

Dan dapatkan sumbernya di sini: https://github.com/jmosbech/StickyTableHeaders

Jika Anda menargetkan peramban modern yang memenuhi standar css3 ( Dukungan peramban: https://caniuse.com/#feat=css-sticky ), Anda dapat menggunakan position:sticky, yang tidak memerlukan JS dan tidak akan merusak tata letak tabel yang tidak selaras dan td dari kolom yang sama. Juga tidak membutuhkan lebar kolom tetap untuk berfungsi dengan benar.

Contoh untuk satu baris tajuk:

thead th
{
    position: sticky;
    top: 0px;
}

Untuk theads dengan 1 atau 2 baris, Anda dapat menggunakan sesuatu seperti ini:

thead > :last-child th
{
    position: sticky;
    top: 30px; /* This is for all the the "th" elements in the second row, (in this casa is the last child element into the thead) */
}

thead > :first-child th
{
    position: sticky;
    top: 0px; /* This is for all the the "th" elements in the first child row */
}

Anda mungkin perlu bermain sedikit dengan properti teratas anak terakhir yang mengubah jumlah piksel agar sesuai dengan ketinggian baris pertama (+ margin + perbatasan + padding, jika ada), sehingga baris kedua menempel tepat di bawah di bawah yang pertama.

Kedua solusi juga berfungsi bahkan jika Anda memiliki lebih dari satu tabel di halaman yang sama: thelemen dari masing-masing mulai lengket ketika posisi atasnya adalah yang ditunjukkan dalam definisi css dan hilang begitu saja ketika semua tabel bergulir ke bawah. Jadi, jika ada lebih banyak tabel, semuanya bekerja dengan indah dengan cara yang sama.

Mengapa menggunakan anak terakhir sebelum dan anak pertama setelah di css?

Karena aturan css di-render oleh browser dalam urutan yang sama ketika Anda menuliskannya ke dalam file css dan karena ini jika Anda hanya memiliki 1 baris ke dalam elemen thead, baris pertama secara bersamaan juga merupakan baris terakhir dan aturan anak-anak perlu untuk menimpa anak terakhir. Jika tidak, Anda akan memiliki offset baris 30 px dari margin atas yang saya kira tidak Anda inginkan.

Masalah yang diketahui dari posisi: sticky adalah bahwa itu tidak berfungsi pada elemen thead atau baris tabel: Anda harus menargetkan elemen th. Hopping masalah ini akan diselesaikan pada versi browser yang akan datang.

Alternatif yang mungkin

js-floating-table-header

js-floating-table-header (Google Code)

Di Drupal

Saya punya situs Drupal 6. Saya berada di halaman "modul" admin, dan melihat tabel memiliki fitur yang tepat ini!

Melihat kode itu, tampaknya diimplementasikan oleh file bernama tableheader.js. Ini menerapkan fitur pada semua tabel dengan kelas sticky-enabled.

Untuk situs Drupal, saya ingin dapat menggunakan tableheader.jsmodul apa adanya untuk konten pengguna. tableheader.jstampaknya tidak ada di halaman konten pengguna di Drupal. Saya memposting pesan forum untuk bertanya bagaimana memodifikasi tema Drupal sehingga tersedia. Menurut tanggapan, tableheader.jsdapat ditambahkan ke tema Drupal menggunakan drupal_add_js()dalam tema template.phpsebagai berikut:

drupal_add_js('misc/tableheader.js', 'core');

Saya mengalami masalah ini baru-baru ini. Sayangnya, saya harus melakukan 2 tabel, satu untuk header dan satu untuk tubuh. Ini mungkin bukan pendekatan terbaik yang pernah ada tetapi begini:

<html>
<head>
    <title>oh hai</title>
</head>
<body>
    <table id="tableHeader">
        <tr>
            <th style="width:100px; background-color:#CCCCCC">col header</th>
            <th style="width:100px; background-color:#CCCCCC">col header</th>
        </tr>
    </table>
    <div style="height:50px; overflow:auto; width:250px">
        <table>
            <tr>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data1</td>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data1</td>
            </tr>
            <tr>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data2</td>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data2</td>
            </tr>
        </table>
    </div>
</body>
</html>

Ini bekerja untuk saya, itu mungkin bukan cara yang elegan tetapi tidak berhasil. Saya akan menyelidiki jadi lihat apakah saya bisa melakukan sesuatu yang lebih baik, tetapi memungkinkan untuk beberapa tabel.

Bacalah kepatutan melimpah untuk melihat apakah itu sesuai dengan kebutuhan Anda

Ini benar-benar hal yang sulit untuk memiliki header yang lengket di meja Anda. Saya memiliki persyaratan yang sama tetapi dengan asp: GridView dan kemudian saya menemukan itu benar-benar dianggap memiliki header yang lengket di gridview. Ada banyak solusi yang tersedia dan saya butuh 3 hari untuk mencoba semua solusi tetapi tidak ada satupun yang bisa memuaskan.

Masalah utama yang saya hadapi dengan sebagian besar solusi ini adalah masalah penyelarasan. Saat Anda mencoba membuat tajuk melayang, entah bagaimana penyelarasan sel tajuk dan sel tubuh keluar jalur.

Dengan beberapa solusi, saya juga mendapat masalah tumpang tindih tumpang tindih dengan beberapa baris tubuh pertama, yang menyebabkan baris tubuh tersembunyi di belakang tajuk mengambang.

Jadi sekarang saya harus menerapkan logika saya sendiri untuk mencapai ini, meskipun saya juga tidak menganggap ini sebagai solusi yang sempurna tetapi ini juga bisa bermanfaat bagi seseorang,

Di bawah ini adalah tabel sampel.

<div class="table-holder">
        <table id="MyTable" cellpadding="4" cellspacing="0" border="1px" class="customerTable">
            <thead>
                <tr><th>ID</th><th>First Name</th><th>Last Name</th><th>DOB</th><th>Place</th></tr>
            </thead>
            <tbody>
                <tr><td>1</td><td>Customer1</td><td>LastName</td><td>1-1-1</td><td>SUN</td></tr>
                <tr><td>2</td><td>Customer2</td><td>LastName</td><td>2-2-2</td><td>Earth</td></tr>
                <tr><td>3</td><td>Customer3</td><td>LastName</td><td>3-3-3</td><td>Mars</td></tr>
                <tr><td>4</td><td>Customer4</td><td>LastName</td><td>4-4-4</td><td>Venus</td></tr>
                <tr><td>5</td><td>Customer5</td><td>LastName</td><td>5-5-5</td><td>Saturn</td></tr>
                <tr><td>6</td><td>Customer6</td><td>LastName</td><td>6-6-6</td><td>Jupitor</td></tr>
                <tr><td>7</td><td>Customer7</td><td>LastName</td><td>7-7-7</td><td>Mercury</td></tr>
                <tr><td>8</td><td>Customer8</td><td>LastName</td><td>8-8-8</td><td>Moon</td></tr>
                <tr><td>9</td><td>Customer9</td><td>LastName</td><td>9-9-9</td><td>Uranus</td></tr>
                <tr><td>10</td><td>Customer10</td><td>LastName</td><td>10-10-10</td><td>Neptune</td></tr>
            </tbody>
        </table>
    </div>

Catatan : Tabel ini dibungkus menjadi DIV dengan atribut kelas yang sama dengan 'table-holder'.

Di bawah ini adalah skrip JQuery yang saya tambahkan di header halaman html saya.

<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //create var for table holder
        var originalTableHolder = $(".table-holder");
        // set the table holder's with
        originalTableHolder.width($('table', originalTableHolder).width() + 17);
        // Create a clone of table holder DIV
        var clonedtableHolder = originalTableHolder.clone();

        // Calculate height of all header rows.
        var headerHeight = 0;
        $('thead', originalTableHolder).each(function (index, element) {
            headerHeight = headerHeight + $(element).height();
        });

        // Set the position of cloned table so that cloned table overlapped the original
        clonedtableHolder.css('position', 'relative');
        clonedtableHolder.css('top', headerHeight + 'px');

        // Set the height of cloned header equal to header height only so that body is not visible of cloned header
        clonedtableHolder.height(headerHeight);
        clonedtableHolder.css('overflow', 'hidden');

        // reset the ID attribute of each element in cloned table
        $('*', clonedtableHolder).each(function (index, element) {
            if ($(element).attr('id')) {
                $(element).attr('id', $(element).attr('id') + '_Cloned');
            }
        });

        originalTableHolder.css('border-bottom', '1px solid #aaa');

        // Place the cloned table holder before original one
        originalTableHolder.before(clonedtableHolder);
    });
</script>

dan akhirnya di bawah ini adalah kelas CSS untuk tujuan pewarnaan.

.table-holder
{
    height:200px;
    overflow:auto;
    border-width:0px;    
}

.customerTable thead
{
    background: #4b6c9e;        
    color:White;
}

Jadi seluruh ide dari logika ini adalah untuk menempatkan tabel ke dalam div pemegang tabel dan membuat klon dari pemegang itu di sisi klien ketika halaman dimuat. Sekarang sembunyikan isi tabel di dalam pemegang klon dan posisikan bagian tajuk yang tersisa ke tajuk asli.

Solusi yang sama juga berfungsi untuk asp: gridview, Anda perlu menambahkan dua langkah lagi untuk mencapai ini di gridview,

1. Dalam acara OnPrerender objek gridview di halaman web Anda, setel bagian tabel dari baris header sama dengan TableHeader.

   if (this.HeaderRow != null)
   {
       this.HeaderRow.TableSection = TableRowSection.TableHeader;
   }

2. Dan bungkus grid Anda menjadi <div class="table-holder"></div>.

Catatan : jika tajuk Anda memiliki kontrol yang dapat diklik maka Anda mungkin perlu menambahkan beberapa skrip jQuery untuk meneruskan peristiwa yang dibesarkan dalam tajuk yang dikloning ke tajuk asli. Kode ini sudah tersedia di plugin sticky-header jQuery yang dibuat oleh jmosbech

Menggunakan display: fixedpada theadbagian harus berfungsi, tetapi untuk itu hanya bekerja pada tabel saat ini dalam tampilan, Anda akan memerlukan bantuan JavaScript. Dan itu akan rumit karena perlu mencari tahu tempat menggulir dan lokasi elemen relatif terhadap viewport, yang merupakan salah satu area utama ketidakcocokan browser.

Lihatlah kerangka kerja JavaScript yang populer (jQuery, MooTools, YUI, dll.) Untuk melihat apakah mereka dapat melakukan apa yang Anda inginkan atau membuatnya lebih mudah untuk melakukan apa yang Anda inginkan.

Jika Anda menggunakan tabel layar penuh Anda mungkin tertarik untuk mengatur th untuk menampilkan: diperbaiki; dan atas: 0; atau coba pendekatan yang sangat mirip melalui css.

Memperbarui

Cukup cepat buat solusi yang berfungsi dengan iframe (html4.0). Contoh ini BUKAN kesesuaian standar, namun Anda dapat dengan mudah memperbaikinya:

outer.html

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Outer</title>
  <body>
    <iframe src="test.html" width="200" height="100"></iframe>
    </body>
</html> 

test.html

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Floating</title>
    <style type="text/css">
      .content{
        position:relative; 
      }

      thead{
        background-color:red;
        position:fixed; 
        top:0;
      }
    </style>
  <body>
    <div class="content">      
      <table>
        <thead>
          <tr class="top"><td>Title</td></tr>
        </head>
        <tbody>
          <tr><td>a</td></tr>
          <tr><td>b</td></tr>
          <tr><td>c</td></tr>
          <tr><td>d</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
        </tbody>
      </table>
    </div>
    </body>
</html> 

Jawaban paling sederhana hanya menggunakan CSS: D !!!

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

table thead tr th {
  /* you could also change td instead th depending your html code */
  background-color: green;
  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>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>david</td>
       <td>castro</td>
       <td>rocks!</td>
     </tr>
  </tbody>
</table>

Itu bukti dari konsep Anda membuat rasanya! Namun saya juga menemukan plugin jQuery ini yang tampaknya berfungsi dengan sangat baik. Semoga ini bisa membantu!

Ini membuat frustasi karena apa yang berfungsi dengan baik di satu browser tidak bekerja di browser lain. Berikut ini berfungsi di Firefox, tetapi tidak di Chrome atau IE:

<table width="80%">

 <thead>

 <tr>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
 </tr>

 </thead>

 <tbody style="height:50px; overflow:auto">

  <tr>
    <td>Cell A1</td>
    <td>Cell B1</td>
    <td>Cell C1</td>
  </tr>

  <tr>
    <td>Cell A2</td>
    <td>Cell B2</td>
    <td>Cell C2</td>
  </tr>

  <tr>
    <td>Cell A3</td>
    <td>Cell B3</td>
    <td>Cell C3</td>
  </tr>

 </tbody>

</table>