Yüzdeleri kullanarak bir tablo hücresinin maksimum genişliğini nasıl ayarlayabilirim?

104

<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
td{max-width:67%;}
</style>

Yukarıdakiler çalışmıyor. Yüzdeleri kullanarak bir tablo hücresinin maksimum genişliğini nasıl ayarlayabilirim?

html css html-table

— Leo Jiang
kaynak

Lütfen "çalışmıyor" u genişletin .

— Sparky

1

Td'nizin PARENT'inin belirli bir genişliğe sahip olduğundan emin olmalısınız (genişliği geçseniz de:% 100; gövdeden td'nize kadar veya ebeveyne (burada: tr) 1000px veya tercih ettiğiniz şeyi verebilirsiniz. . %% 'yi css'de kullanırken, her zaman üst öğede tanımlanan tam piksel değerini kullanır ve ardından pikselleri , ebeveynlerine göre bir boyuta sahip oldukları için çocuklar için %%'ye dönüştürür .

— Philipp Meissner

Kayıt için, maksimum genişlik artık Safari ve Chrome'da çalışıyor. Ne kadar süredir desteklendiğinden emin değilim.

— Jay

73

CSS 2.1 spesifikasyonundaki maksimum genişlik tanımına göre , "'min-width' ve 'max-width'in tablolar, satır içi tablolar, tablo hücreleri, tablo sütunları ve sütun grupları üzerindeki etkisi tanımsızdır." Dolayısıyla, bir td öğesinde maksimum genişliği doğrudan ayarlayamazsınız.

Yalnızca ikinci sütunun en fazla% 67 kaplamasını istiyorsanız, genişliği (tablo hücreleri için gerçekte minimum genişliktir)% 33 olarak ayarlayabilirsiniz, örneğin örnek durumda

td:first-child { width: 33% ;}

Tarayıcıların sütunlara eşit genişlik vermesini sağladığından, her iki sütun için bunu ayarlamak o kadar iyi çalışmayacaktır.

— Jukka K. Korpela
kaynak

Aslında maksimum genişlik artık Safari ve Chrome'da çalışıyor. Ne kadar süredir desteklendiğinden emin değilim.

— Jay

118

Bildiğim eski soru, ancak bu artık table-layout: fixedtablo etiketindeki css özelliğini kullanarak mümkün . Bu sorunun altındaki cevap , bir tablo hücresinde CSS yüzde genişliği ve metin taşması

Bu, kullanılarak kolayca yapılabilir table-layout: fixed, ancak biraz yanıltıcıdır çünkü çoğu kişi bu CSS özelliğini bilmiyor.

table {
  width: 100%;
  table-layout: fixed;
}

Buradaki güncellenmiş kemanla iş başında görün: http://jsfiddle.net/Fm5bM/4/

— süper sesli
kaynak

2

Teşekkürler! Korkmuştum sabit, genişliği ayarlanmamış hücrelerin genişliğini yeniden hesaplamayacağı anlamına geliyor, ama neyse ki durum böyle değil.

— fassl

4

Jsfiddle'ınızda, genişlik özelliklerini kaldırırsam, maksimum genişlik hala çalışmıyor, bu yüzden bunun sorunu nasıl çözeceğinden emin değilim.

— frezq

6

@superphonic Sanırım kafanız karıştı. Bu max-widthjsfiddle'ı kaldırırsanız, genişlik aynı kalacaktır, bu yüzden onu max-widthayarlayan şey değildir. max-width: 10%Birincisi a ile değiştirirseniz daha net olabilir td... değişmediğini göreceksiniz. jsfiddle.net/w3f8ey22/1

— frezq

5

tablo düzeni: sabit, OP sorununu çözmez. Sihirli bir şekilde bir masa hücresinde 'min-genişlik' çalışmasını sağlamaz. Tablo düzeni: sabit kaldırılırsa, başvurulan her iki keman da ekranda farklılık göstermez.

— cmerriman

3

soruyla ilgili olmadığı için bu cevap yanıltıcıdır

— Zoltán Süle

9

Bunun tam anlamıyla bir yıl sonra olduğunu biliyorum, ama paylaşacağımı düşündüm. Ben de aynı şeyi yapmaya çalışıyordum ve benim için işe yarayan bu çözüme rastladım. Tüm tablo için bir maksimum genişlik belirledik, ardından istenen etki için hücre boyutlarıyla çalıştık.

Tabloyu kendi div bölümüne yerleştirin, ardından tüm tablo için div'in genişliğini, minimum genişliğini ve / veya maksimum genişliğini istediğiniz gibi ayarlayın. Ardından, istediğimiz maksimum genişliği elde etmek için diğer hücreler için genişlik ve minimum genişlikleri ve div için maksimum genişliği ayarlayabilir ve etrafta ve geriye doğru etkili bir şekilde çalışarak istediğimiz maksimum genişliği elde edebilirsiniz.

<div id="tablediv">
<table width="100%">
 <tr>
  <td class="tdleft">Test</td>
  <td>A long string blah blah blah</td>
 </tr>
</table>
</div>

Sonra stillerinize şunu koyun:

#tablediv {
    width:90%;
    min-width:800px
    max-width:1500px;
}
.tdleft {
    width:20%;
    min-width:200px;
}

Kuşkusuz, bu size tek başına bir hücrenin "maksimum" genişliğini vermez, ancak böyle bir seçeneğin yerine çalışabilecek bazı kontrollere izin verir. İhtiyaçlarınız için işe yarayıp yaramayacağından emin değilim. Sayfadaki gezinme tarafının bir noktaya kadar ölçeklenmesini istediğimiz durumumuz için, ancak bugünlerde tüm geniş ekranlar için işe yaradığını biliyorum.

— Damon
kaynak

0

yüzde mutlak bir boyuta göre olmalıdır, şunu deneyin:

<table>
<tr>
<td>Testasdas 3123 1 dasd as da</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
table{width:200px;}
td{width:65%;border:1px solid black;}
</style>

— dov.amir
kaynak