<tbody>Öğeyi kaydırılabilir yapmak için, sayfada görüntülenme biçimini değiştirmemiz gerekir; örneğin display: block;bunu bir blok düzeyi öğesi olarak görüntülemek için kullanılır .
Değiştirmemiz yana displayözelliği tbody, biz bu özelliğini değiştirmek gerekir theadelemanı yanı tablo düzeni kırılmasını önlemek için.
Böylece sahibiz:
thead, tbody { display: block; }
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
Web tarayıcıları theadve tbodyöğelerini satır grubu ( table-header-groupvetable-row-group varsayılan ) olarak görüntüler.
Bunu değiştirdiğimizde, içi tr elemanlar konteynerlerinin tüm alanını doldurmaz.
Bunu düzeltmek için tbodysütunların genişliğini hesaplamamız ve karşılık gelen değerithead JavaScript aracılığıyla sütunlara .
Otomatik Genişlik Sütunları
Yukarıdaki mantığın jQuery sürümü:
// Change the selector if needed
var $table = $('table'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
Ve işte çıktı (Windows 7 Chrome 32'de) :
ÇALIŞMA DEMOSU .
Tam Genişlik Tablosu, Göreceli Genişlik Sütunları
Orijinal Poster gerektiğinde, kabının table% 100'üne kadar genişletebilir widthve ardından tablonun her sütunu için göreli ( Yüzde ) kullanabilirsiniz width.
table {
width: 100%; /* Optional */
}
tbody td, thead th {
width: 20%; /* Optional */
}
Tablonun (bir çeşit) sıvı düzenithead olduğundan, kap yeniden boyutlandırıldığında sütun genişliğini ayarlamalıyız .
Bu nedenle, pencere yeniden boyutlandırıldıktan sonra sütunların genişliklerini ayarlamalıyız:
// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
/* Same as before */
}).resize(); // Trigger the resize handler once the script runs
Çıktı:
ÇALIŞMA DEMOSU .
Tarayıcı Desteği ve Alternatifleri
Yukarıdaki iki yöntemi Windows 7'de büyük Web Tarayıcılarının (IE10 + dahil) yeni sürümleri aracılığıyla test ettim ve işe yaradı.
Ancak, gelmez işe düzgün IE9 üzerinde ve altında.
Bunun nedeni , bir tablo düzeninde , tüm öğelerin aynı yapısal özellikleri izlemesi gerektiğidir.
Kullanarak display: block;için <thead>ve <tbody>elemanları, biz masa yapısını kırdım.
JavaScript ile düzeni yeniden tasarlayın
Bir yaklaşım, (tüm) tablo düzenini yeniden tasarlamaktır. Anında yeni bir düzen oluşturmak ve / veya hücrelerin genişliklerini / yüksekliklerini dinamik olarak ayarlamak için JavaScript kullanma.
Örneğin, aşağıdaki örneklere göz atın:
Yerleştirme tabloları
Bu yaklaşım, div içeren iki iç içe tablo kullanır. Birincisinde a tableolan tek bir hücre vardır divve ikinci tablo bu divöğenin içine yerleştirilir .
Kontrol Dikey kaydırma tablolar de CSS Oynat .
Bu, çoğu web tarayıcısında çalışır. Yukarıdaki mantığı JavaScript ile dinamik olarak da yapabiliriz.
Sabit başlıklı tablo
Dikey kaydırma çubuğu ekleme amacı her satırın üstünde <tbody>tablo üstbilgisini görüntülediğinden , öğeyi kalacak şekilde konumlandırabiliriztheadfixed ekranın üstünde .
İşte Julien tarafından gerçekleştirilen bu yaklaşımın bir Çalışma Demosu .
Umut verici bir web tarayıcısı desteği var.
Ve burada bir saf CSS ile uygulama Willem Van Bockstal .
Saf CSS Çözümü
İşte eski cevap. Elbette yeni bir yöntem ekledim ve CSS bildirimlerini geliştirdim.
Sabit Genişlikli Masa
Bu durumda, tablesabit olmalıdır width (sütun genişliklerinin toplamı ve dikey kaydırma çubuğunun genişliği dahil) .
Her bir sütun, bir spesifik olmalıdır genişliği ve son sütun ait theadelemanının daha büyük bir ihtiyaç genişliği diğerleri eşittir genişliği + genişlik dikey kaydırma çubuğu arasında.
Bu nedenle, CSS şöyle olur:
table {
width: 716px; /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
}
tbody, thead tr { display: block; }
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 140px;
}
thead th:last-child {
width: 156px; /* 140px + 16px scrollbar width */
}
İşte çıktı:
ÇALIŞMA DEMOSU .
% 100 Genişliğe Sahip Masa
Bu yaklaşımda, tablebir genişliğe sahiptir 100%ve her biri için thve tddeğeri, widthözelliği en az olmalıdır 100% / number of cols.
Ayrıca, azaltmak için gereken genişlikte bir theaddeğeri olarak genişliği dikey kaydırma çubuğu arasında.
Bunu yapmak için CSS3 calc()işlevini aşağıdaki gibi kullanmamız gerekir :
table {
width: 100%;
border-spacing: 0;
}
thead, tbody, tr, th, td { display: block; }
thead tr {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: calc(100% - 16px);
}
tr:after { /* clearing float */
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 19%; /* 19% is less than (100% / 5 cols) = 20% */
float: left;
}
İşte Online Demo .
Not: Her sütunun içeriği çizgiyi kırarsa bu yaklaşım başarısız olur, yani her hücrenin içeriği yeterince kısa olmalıdır .
Aşağıda, bu soruyu cevapladığım sırada oluşturduğum iki basit saf CSS çözümü örneği var .
İşte jsFiddle Demo v2 .
Eski versiyon: jsFiddle Demo v1
