Nasıl 100% <table> genişliği ayarlamak için sadece <tbody> dikey kaydırma içine koymak biraz yükseklik olabilir miyim?

HTML:

<table>
<thead>
<tr>
    <th>Head 1</th>
    <th>Head 2</th>
    <th>Head 3</th>
    <th>Head 4</th>
    <th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
    <td>Content 1</td>
    <td>Content 2</td>
    <td>Content 3</td>
    <td>Content 4</td>
    <td>Content 5</td>
</tr>
</tbody>
</table>

CSS:

table {
    width: 100%;
    display:block;
}
thead {
    display: inline-block;
    width: 100%;
    height: 20px;
}
tbody {
    height: 200px;
    display: inline-block;
    width: 100%;
    overflow: auto;
}

Ben önlemek istiyorsanız ekleyerek bazı ek dıv, tüm istediğim basit bir tablo gibi bu ve ben değiştirmeye çalıştığını ekran, table-layout, position ve çok daha fazla şeyler CSS tablo çalışmıyor iyi ile 0 genişlik sadece sabit genişlik px.

<tbody> eleman sekmeli yapmak için, sayfa yani on display: block; blok düzeyi öğesi olarak görüntülemek için kullanarak gösterilen şekilde değiştirmemiz gerek.

tbody display özelliği değiştiriyoruz beri thead öğe için bu özelliği değiştirmek için de masa düzeni bölünmesini engellemek zorundayız.

Var:

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 thead tbody öğeler olarak görüntülersatır grubuVarsayılan (table-header-group table-row-group).

Bunu değiştirebilir miyiz bir kez tr içindeki unsurlar bulundukları kabın tüm boşluğu doldurmak değil.

Bunu düzeltmek için, tbody sütun genişliğini hesaplamak ve JavaScript ile thead sütunlar için karşılık gelen değeri uygulamak zorundayız.

Otomatik Sütun Genişliği

İşte yukarıdaki mantık 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 burada çıktı(Windows 7 Chrome 32):

WORKING DEMO.

Tam Genişlik Masa, Göreli Sütun Genişliği

Gönderen gerektiği gibi, kab width 0 table genişletin ve bir akrabası kullanarak yapabiliriz (Yüzdesi) width tablo her sütun için.

table {
    width: 100%; /* Optional */
}

tbody td, thead th {
    width: 20%;  /* Optional */
}

Tablo bu yana bir türsıvı düzenibu kap yeniden boyutlandırıldığında thead sütun genişliğini ayarlamak gerekir.

Dolayısıyla biz sütunları ayarlamak gerekir pencere boyutları bir kez' genişlik:

// 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ısı şöyle olacaktır:

WORKING DEMO.

Tarayıcı Desteği ve Alternatif

Büyük Web Tarayıcıların yeni sürümleri ile Windows 7 üzerinde iki yukarıdaki yöntemleri denedim (IE10 dahil ) ve işe yaradı.

Ancak, * *58 59* properly on IE9 bu *ve aşağıda.

Çünkübir table layout Bütün elemanları aynı yapısal özellikleri takip etmelidir.

<thead> <tbody> elementler display: block; kullanarak, tablo yapısını çözdük.

JavaScript ile düzeni yeniden tasarımı

Bir yaklaşım (bütün) masa düzeni yeniden sağlamaktır. JavaScript anında yeni bir düzen oluşturun ve ve/veya genişliklerini ayarlamak için kolu kullanarak hücrelerin Yükseklikleri dinamik.

Örneğin, aşağıdaki örneklere bir göz atın:

• bir WordPress kullanmak.floatThead()eklenti (kilitli/yapışkan yüzer/tablo Başlığı bir eklenti)
• bir WordPress kullanmakScrollable Tableeklenti. (Githubsource code)
• bir WordPress kullanmak.FixedHeaderTable()eklenti (source code github)
• DataTablevertical scrollingörnek.

Yuvalama tablolar

Bu yaklaşım içeren bir div ile iç içe iki tablo kullanır. table div div bu elemanı içine yerleştirilen ikinci bir tablo olan tek bir hücre vardır.

Vertical scrolling tables kontrol edinCSS Oynamak.

Bu web tarayıcılarının çoğunda çalışıyor. Ayrıca dinamik olarak JavaScript ile yukarıdaki mantık yapabiliriz.

Kaydırma üzerinde sabit başlık ile tablo

Dikey kaydırma çubuğu <tbody> ekleyerek beri amacı tablo sergiliyorbaşlıkher satır başında, yapabilirizpozisyonthead öğesini ekranın üst kısmında fixed yerine kalmak.

İşteWorking Demobu yaklaşım tarafından yapılacakJulien.
Gelecek vaat eden bir web tarayıcı desteği vardır.

herepure CSSWillem Van Bockstal tarafından uygulanması.

Saf CSS Çözüm

Burada eski cevap. Elbette yeni bir yöntem eklendi ve CSS bildirimleri rafine ettim.

Sabit büyüklükte bir masa

Bu durumda, table width sabit olmalıdır(sütun genişlikleri ve kaydırma çubuğu dikey genişliği) . bu miktar da dahil olmak üzere .

Hersütunbir özel vargenişlikveson sütunthead eleman ihtiyacı var dahagenişlikdiğerlerine eşittir'genişlikgenişlikkaydırma çubuğu dikey.

Bu nedenle, CSS:

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 çıkış:

WORKING DEMO.

100% Genişliği ile tablo

Bu yaklaşım, table eni 100% ve her th ve td değeri width özellik olmalı az 100% / number of cols.

Ayrıca, azaltmalıyızgenişlikthead değeri olarakgenişlikkaydırma çubuğu dikey.

CSS3 calc() fonksiyonu kullanmamız gerekiyor bunu yapmak için, aşağıdaki gibi

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

İşteOnline Demo.

Not:Bu yaklaşımbaşarısızeğer her sütunun içeriğini Satır sonları, yaniher hücrenin içeriğini yeterince kısa olmalıdır.

Aşağıda, iki basit örnek varsaf CSS çözümbu soruyu cevapladım zamanda oluşturdum.

İştejsFiddle Demo v2.

Eski sürüm:jsFiddle Demo v1