Kullanıcı jQuery ile görüş alanı dışına çıktığında en üstte sabit kalacak tablo başlığı

146

Ne zaman ve SADECE kullanıcı görünüm dışına kaydırdığında başlığı sayfanın üst kısmında kalacak bir HTML tablosu tasarlamaya çalışıyorum. Örneğin, tablo sayfadan 500 piksel aşağıya doğru olabilir, kullanıcı üstbilgiyi görünmez hale getirirse (tarayıcı artık bir şekilde windows görünümünde olmadığını algılarsa) üstte kalmaya devam eder ? Herkes bana bir Javascript çözüm verebilir?

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

Yukarıdaki örnekte, <thead>görünümün dışına çıkarsa sayfa ile kaydırmak istiyorum .

ÖNEMLİ: Ben am DEĞİL çözüm arama <tbody>(: auto taşma) bir kaydırma çubuğu olacaktır.

jquery  html  html-table 
— Sam Dufel
kaynak
2
— Brad Tofel
— Gamalı Haç Raj Ghosh 22:18
Bunu başka bir soru için cevapladım, lütfen bir göz atın. stackoverflow.com/a/56764334/9388978
— Ersel Aktas

Yanıtlar:

131

scrollOlay işleyicisine dokunarak ve sayfanın üst kısmında başlığı göstermek için sabit bir konuma sahip windowbaşka tablebir şey kullanarak böyle bir şey yaparsınız .

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

Bu, kullanıcı orijinal tablo başlığını gizleyecek kadar aşağı kaydırdığında tablo başlığını gösterir. Kullanıcı sayfayı tekrar yeterince yukarı kaydırdığında tekrar gizlenir.

Çalışma örneği: http://jsfiddle.net/andrewwhitaker/fj8wM/

— Andrew Whitaker
kaynak
60
Bunu düşünüyordum ama başlık sütunlarının genişlikleri içeriğe göre değişirse ne olur? Sütun genişlikleri sabitlenmedikçe, başlık satırınızın içerik satırlarıyla aynı hizaya gelmemesini sağlayabilirsiniz. Sadece bir düşünce.
— Yzmir Ramirez
16
sütun üstbilgilerinin adları sütun veri değerlerinden daha kısasa bu örnek çalışmaz. Bilgi yerine infoooooooo gibi değerlere sahip olmak için bu kemanı değiştirmeyi deneyin. Tabloyu kopyalarken ayarlanan bir çeşit sabit kodlanmış genişlik düşünüyorum.
— whiterook6
6
Bu, büyük bir kısıtlamaya sahiptir, en azı tabloyu başka bir kapta kullanmaya çalışırken window. mkoryak.github.io/floatThead daha genel olarak uygulanabilir bir çözüme sahiptir.
— Yuck
13
Bu, dinamik th genişliklere ihtiyaç duyan herkese yardımcı olabilir, yaptığım şey, @AndrewWhitaker'ın bir çatalı: jsfiddle.net/noahkoch/wLcjh/1
— Noah Koch
1
@NoahKoch, çözümünüzü kullanan sabit başlık, orijinal hücrelerin dolgusu olduğunda hala orijinal kafa kadar geniş olmayabilir. Çoğaltılmış hücrelere dolgu eklemek için çözümünüzü geliştirdim. JSFiddle's fork: jsfiddle.net/1n23m69u/2
— fandasson
47

Saf CSS (IE11 desteği olmadan):

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
kaynak
1
Bunun Chrome'da çalıştığını bile görmüyorum. Denetim araçları -webkit-stickyiçin geçersiz bir değer olarak gösterilir position.
— carmenizm
@carmenism -webkit-sticky, Chrome için değil Safari (Masaüstü ve iOS) içindir. position: stickyChrome'da 56 sürümünden çalışır. BOTH kurallarını ayarlamanız gerekir: -webkit-stickyve stickykod örneğimle tam olarak aynı sırayla. Safari alır webkit-stickyve diğer tüm tarayıcılar üzerine yazar sticky.
— Ihor Zenich
2
Bunu çalıştıramadım. Hızlı bir google'dan position: stickytablo öğeleriyle çalışmaz gibi görünüyor .
— rjh
3
th için başvuruda bulundu benim için çalıştı: table
— thead
1
Sen bunu uygulamak zorunda th çünkü olacak thead ne de tr değil iş
— helado
46

Peki, aynı etkiyi sabit boyutlu sütunlara başvurmadan veya tüm tablo için sabit bir yüksekliğe sahip olmadan elde etmeye çalışıyordum.

Ortaya koyduğum çözüm bir hack. Tüm tabloyu çoğaltmak, sonra başlık hariç her şeyi gizlemek ve bunu sabit bir konuma getirmekten oluşur.

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

Buraya bakın: http://jsfiddle.net/QHQGF/7/

Düzenleme: kod, işaretçinin işaretçi olaylarını alabilmesi için güncellendi (böylece başlıktaki düğmeler ve bağlantılar hala çalışır). Bu, luhfluh ve Joe M tarafından bildirilen sorunu giderir.

Yeni jsfiddle burada: http://jsfiddle.net/cjKEx/

— entropi
kaynak
3
İlk önce denedim, bununla ilgili sorun, başlıktaki öğelerin boyutunun tablonun içeriğine bağlı olmasıdır. Büyük içeriğe sahip bir satırınız varsa, başlık dahil tüm sütun büyüyecektir. Eğer sadece klonlanırsanız, bu bilgileri kaybedersiniz ve istediğiniz etkiyi elde edemezsiniz. Yzmir Ramirez'in kabul edilen cevap hakkındaki yorumuna bakın. Sabit genişlik sütunları olmadan çalışan tek yol budur. Temiz değil, biliyorum, bunun bir hack olduğunu söylediğim gibi.
— entropi
1
Oh anladım. Bu yöntem harika çünkü akıcı sütunlarla çalışıyor, biraz googledim ve bu işlevselliğe sahip başka bir tane bulamadım. Her neyse, bir şekilde halledeceğim, burada
— anlatacağım
1
@luhfluh, evet, sorun işaretçi olaylarından kaynaklanıyordu: klonlanan tabloda hiçbiri. Bu, tıklamaların klondan ve orijinal tabloya gitmesi için kullanılır. Üstbilginin (ve yalnızca üstbilginin) tıklanabilir olması için klonlanan tablonun başlığında döndürülmesi sorunu çözer. Bunu yansıtmak için yazımı güncelledim :)
— entropi
4
<thead> <th> sınır eklerken sorun oluştu
— Jam Ville
1
@JamVille Çünkü klonlanmış tablo var visibility: hidden. Sadece gizleyebilir #clone tbodyve bundan sonra sınır ayarlayabilirsiniz ... Çalışan keman: jsfiddle.net/QHQGF/1707
— Lajdák Marek
26

Bunu yapan bir eklenti yazdım. Yaklaşık bir yıldır üzerinde çalışıyorum ve tüm köşe davalarını oldukça iyi idare ettiğini düşünüyorum:

  • taşan bir kap içinde kaydırma
  • bir pencere içinde kaydırma
  • pencereyi yeniden boyutlandırdığınızda neler olduğuna dikkat etmek
  • etkinliklerinizi başlığa bağlı tutma
  • en önemlisi, çalışmasını sağlamak için tablonuzun css'sini değiştirmeye zorlamaz

İşte bazı demolar / dokümanlar:
http://mkoryak.github.io/floatThead/

— mkoryak
kaynak
büyük çaba, ancak IE 10 ile çalışmıyor ve firefox23 / ubuntu pencerelerini yeniden boyutlandırma konusunda bazı tuhaflıklar var.
— Janning
2
FYI: En son sürümde IE9 ve 10 ile ilgili sorunları çözdüm.
— mkoryak
2
JQuery gerektirmeyen bir sürüm yapabilir misiniz?
— Curtis W
2
muhtemelen jquery kullanmadığı için ... ve hayır - jquery kullanmayan bir sürüm yapmayacağım.
— mkoryak
1
Basit bir jQery tablesorter eklentisi kullanıyorum ve SSS'nize göre eklentiniz #sortable td {..} gibi CSS kurallarının çoğunu beğenmiyor. Biraz ince ayar yapmaya çalıştım ama işe yaramadım.
— masche
25

Sütun genişliklerini değiştirmeyle ilgili sorunu çözebildim. Yukarıdaki Andrew çözümü ile başladım (çok teşekkürler!) Ve sonra klonlanmış td'lerin genişliklerini ayarlamak için küçük bir döngü ekledim:

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

Bu, tüm tabloyu klonlamak ve vücudu gizlemek zorunda kalmadan sorunu çözer. JavaScript ve jQuery (ve taşma yığını) yepyeni, bu yüzden herhangi bir yorum takdir.

— rockusbacchus
kaynak
4
İyi çalıştı ama ben aşağıdaki satırı eklemek gerekiyordu $ ("# header fixed"). Width ($ ("# table-1"). Width ()); sütunlarının doğru sıralanması için.
— Ilya Fedotov
17

Bu, sabit bir tablo başlığına sahip olduğum için bulduğum en iyi çözüm.

GÜNCELLEME 5/11: Kerry Johnson'un işaret ettiği gibi yatay kaydırma hatası düzeltildi

Kod açıklığı: 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>
Snippet'i genişlet

— josephting
kaynak
Bu komut dosyasını, kenarlığı ve dolgusu olan <th> öğelerini işleyebilmesi için sabitledim (aksi takdirde sabit başlık <th> genişliklerini çok geniş olarak ayarlar). Basitçe değiştirmek outerWidthiçin widthresizeFixed () işlevi tanımında.
— alanng
Tabloda sayfa yükünden sonra oluşturulan nesnelerin, siz kaydırdıkça sabit üstbilginin üstünde kaymaması z-indexiçin, .fixedsınıftaki bazı pozitif sayılara bir CSS özelliği de eklemeniz gerekebilir .
— alanng
Basit ve kullanışlı.
— RitchieD
üst konumun dinamik olarak nasıl ele alınacağı. Diyelim ki ana sayfamdaki sabit başlık içeriğimin altına kaydırmam gerekiyor. .fixed {top: 0;} .
— VijayVishnu
2
@KerryJohnson Not için teşekkürler. Yatay kaydırma ve dinamik sütun genişliklerini desteklemesi için bazı değişiklikler yaptım.
— josephting
7

En iyi çözüm bu jquery eklentisini kullanmaktır:

https://github.com/jmosbech/StickyTableHeaders

Bu eklenti bizim için harika çalıştı ve başka birçok çözüm denedik. IE, Chrome ve Firefox'ta test ettik

— Janning
kaynak
Başlıktaki veri aktarma denetimlerinin işlevlerini de koruyan bir çözüm biliyor musunuz?
— Csaba Toth
Benim için çalışmadı: başlıklar tablo dışında ve "scrollableArea" seçeneği ile bile tarayıcının (pencere) üstüne yapışır. Bunun daha önce başka yorum yapılmadan bahsedildiğini gördüm. Belki de kullandığı bir CSS'ye ihtiyaç duyar ve çalışması için mevcut değildir.
— Exel Gamboa
6

Burada zaten çok iyi bir çözüm var. Ancak bu durumlarda kullandığım en basit CSS çözümlerinden biri şöyledir:

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>
Snippet'i genişlet

JavaScript gereksinimi olmadığından durumu önemli ölçüde basitleştirir. Esasen , kaydırma alanı ne olursa olsun tablonun başının üstte kalmasını sağlamak için koşulları içeren ikinci CSS kuralına odaklanmanız gerekir .

Kuralların her birini ayrıntılı olarak açıklamak. positiontarayıcıya baş nesnenin, satırının ve hücrelerinin hepsinin en üste yapışması gerektiğini belirtmek içindir. Buna mutlaka top, kafanın sayfanın veya görünümün üst kısmına yapışacağını belirten tarayıcıya eşlik edilmesi gerekir . Ayrıca,z-index kafanın içeriğinin daima üstte kalmasını sağlamak .

Arka plan rengi sadece noktayı göstermek içindir. Bu efekti elde etmek için herhangi bir ek JavaScript kullanmanıza gerek yoktur. Bu, 2016'dan sonra çoğu büyük tarayıcıda desteklenmektedir.

— Srivats Shankar
kaynak
1
imo basit ve en temiz cevap, her zaman bir sorunu çözmek için basit bir yol vardır, bu durumda. Angularjs ile ng-repeat kullanmama rağmen bir cazibe gibi çalışıyor.
— David Castro
3

bu yaklaşımı kullanabilirsiniz, saf HTML ve CSS JS gerekmez :) 

.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>
Snippet'i genişlet

— xelilof
kaynak
3

JQuery kullanmadan ve sadece CSS kullanmadan basit bir çözüm buldum .

Sabit içeriği 'th' etiketlerinin içine koymalı ve CSS'yi eklemelisiniz

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

Pozisyon, z-endeksi ve üst özellikler yeterlidir. Ancak daha iyi bir görüş elde etmek için gerisini uygulayabilirsiniz.

— Abhi Das
kaynak
2

Ben de sınır biçimlendirme entrophy kodunu kullanarak gösterilmiyor aynı sorunları yaşadı ama birkaç küçük düzeltmeler ve şimdi tablo genişletilebilir ve ekleyebileceğiniz tüm css stil kuralları görüntüler.

css eklemek için:

#maintable{width: 100%}

işte yeni 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"})
            .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
kaynak
Kenar biçimlendirmesi başlıkta olduğu sürece bu, entropinin çözümünden daha iyi sonuç verir. Bununla birlikte, mevcut Firefox'ta (ancak Chrome'da değil), kaydırma başladığında tablonun altında görünür hücre sınırı artefaktları oluşturur.
— alanng
2

İşte kabul edilen cevaba dayanan bir çözüm. Şunlar için düzeltir: sütun genişlikleri, eşleşen tablo stili ve tablo bir kapsayıcı div içinde kaydırıldığında.

kullanım

<thead>Yalnızca başlık içeriği düzeltileceğinden tablonuzun bir etiketi olduğundan emin olun .

$("#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
kaynak
1
Bu benim için iyi çalıştı. Tek şey yatay olarak kaydırılması gereken tablolarla ilgili bir sorundur. Ben burada bir JSFiddle bir güncelleme yaptım jsfiddle.net/4mgneob1/1 Ben $sp.scrollLeft()sabit tablo aşağı doğru kaydırma doğru konumlandırılır böylece soldan kaydırılan tutar alır çıkarma . Ayrıca, sabit tablonun sol pozisyonu ayarlamak için görünür olması durumunda yatay kaydırma yaparken kontrol de eklendi. Çözemediğim bir diğer sorun da tablonun görünüm penceresinin üzerine çıkması, sabit tablonun kullanıcı yukarı kaydırıncaya kadar gizlenmesi gerektiğidir.
— Henesnarfel
1
BaşlarkenUncaught TypeError: $table.scrollParent is not a function
— karlingen
1

Bu, verilerle yatay olarak da kaydırılabilen sabit bir başlığa sahip olmanıza yardımcı olacaktır.

<!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>
— user2669926
kaynak
Bu, verilerle yatay olarak da kaydırılabilen sabit bir başlığa sahip olmanıza yardımcı olacaktır.
— 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>");}

Bu benim çözümüm

— Sadece biz
kaynak
1

Partiye biraz geç, ama burada aynı sayfada birden çok tablo ile çalışan ve "jank" ücretsiz (requestAnimationFrame kullanarak) bir uygulama. Ayrıca sütunlarda herhangi bir genişlik sağlamaya gerek yoktur. Yatay kaydırma da işe yarar.

Başlıklar bir şekilde tanımlanır, divböylece gerekirse herhangi bir işaretleme ekleyebilirsiniz (düğmeler gibi). Gerekli olan tüm HTML budur:

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

— Aslan burcu
kaynak
1

Bu çözümde sabit başlık dinamik olarak oluşturulur, içerik ve stil THEAD'den klonlanır

tek ihtiyacınız olan iki satır örneğin:

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

Benim jquery eklentisi FixedHeader ve getStyleObject aşağıda sağlanan .js dosyasına koyabilirsiniz

// 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>
Snippet'i genişlet

— Piotr C.
kaynak
1

Ana tabloyla aynı üstbilgiye sahip ekstra tablo oluşturun. Sadece bir satır ve içindeki tüm başlıklar ile yeni tabloya thead koyun. Mutlak ve arka plan beyaz konumlandırın. Ana tablo için bir div içine koyun ve biraz yükseklik ve taşma-y kaydırma kullanın. Bu şekilde yeni masamız ana masanın üstbilgisini aşacak ve orada kalacaktır. Her şeyi bir div içinde çevirin. Aşağıda bunu yapmak için kaba kod verilmiştir.

      <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
kaynak
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>
Snippet'i genişlet

Demo: css sabit tablo başlığı demosu

— revilodesign.de
kaynak
1

Bununla ilgili sorununuzu düzeltin

tbody {
  display: table-caption;
  height: 200px;
  caption-side: bottom;
  overflow: auto;
}
— J Benjamín Samayoa
kaynak
0

Bu, style özelliği dönüşümü kullanılarak gerçekleştirilebilir. Tek yapmanız gereken, tablonuzu sabit yükseklik ve taşma otomatik olarak ayarlanmış bir div'a kaydırmaktır, örneğin:

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

Ve sonra kaydırma işleyicisini ona ekleyebilirsiniz, burada her tablo ile sarılmış olan yöntemi bulabilirsiniz <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
      })
    })
  }

Ve işte bunun çalışma örneği (daha güzel hale getirmek için bootstrap kullandım): keman

IE ve Edge'i de desteklemek isteyenler için işte snippet:

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

IE ve Edge kaydırma biraz laggy ... ama çalışıyor

İşte bunu bulmama yardımcı olan cevap : cevap

— Daniel Budzyński
kaynak
0

Bu çözümlerin çoğunu denedim ve sonunda (IMO) en iyi, modern çözümü buldum:

CSS ızgaraları

CSS ızgaraları ile bir 'ızgara' tanımlayabilir ve sonunda sabit bir başlık ve kaydırılabilir içeriğe sahip bir tablo için hoş, javascript içermeyen, tarayıcılar arası bir çözüm oluşturabilirsiniz. Üstbilgi yüksekliği bile dinamik olabilir.

CSS : Izgara olarak görüntüleme ve sayısını ayarlayın template-rows:

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

HTML : Bir ızgara kabı ve tanımlanmış sayı oluşturun rows:

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

İşte çalışan örnek:

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

Transformation kullanarak denedim . Firefox ve Chrome'da iyi çalışıyor olsa da, IE11'de hiçbir işlev yoktur. Çift kaydırma çubuğu yok. Masa ayak ve altyazı desteği. Saf Javascript, jQuery yok.

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

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

Jquery olmadan bir çözüm buldum

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

Burada çalıştığını görebilirsiniz: https://jsfiddle.net/lexsoul/fqbsty3h

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

— Lexsoul
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.