İçeren tablonun tüm genişliğini doldurmak için eşit boyutlu tablo hücreleri

Bir hücre satırının içinde bulunduğu tablonun tüm genişliğini uzatması için HTML / CSS (göreceli boyutlandırma ile) kullanmanın bir yolu var mı?

Hücreler eşit genişlikte olmalıdır ve dış tablo boyutu da dinamiktir <table width="100%">.

Şu anda sabit bir boyut belirtmezsem; hücreler içeriklerine uyacak şekilde otomatik olarak boyutlandırılır.

Hücreler için belirli bir genişlik belirlemenize bile gerek yok table-layout: fixed, hücreleri eşit olarak yaymak için yeterli.

ul {
    width: 100%;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
}
li {
    display: table-cell;
    text-align: center;
    border: 1px solid hotpink;
    vertical-align: middle;
    word-wrap: break-word;
}

<ul>
  <li>foo<br>foo</li>
  <li>barbarbarbarbar</li>
  <li>baz</li>
</ul>

Söz konusu Not table-layouttezgaha tarz elemanının bir genişlik seti (bizim örneğimizde% 100) sahip olması gerekir.

Yalnızca yüzde genişliklerini ve sabit tablo düzenini kullanın :

<table>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
</table>

ile

table { table-layout: fixed; }
td { width: 33%; }

Sabit tablo düzeni önemlidir, çünkü aksi takdirde, içerikler uymuyorsa tarayıcı genişlikleri uygun gördüğü şekilde ayarlayacaktır, yani genişlikler aksi takdirde bir öneridir, sabit tablo düzeni olmayan bir kural değildir.

Açıkçası, CSS'yi koşullarınıza uyacak şekilde ayarlayın; bu, genellikle stili yalnızca belirli bir sınıfa veya muhtemelen belirli bir kimliğe sahip bir tabloya uygulamak anlamına gelir.

table-layout: fixedFor tableve width: calc(100%/3);for için bir özellik olarak kullanma td( 3 td'ler olduğu varsayılarak ). Bu iki özellik ayarlandığında, tablo hücrelerinin boyutu eşit olacaktır .

Bakın demo .