2011-06-21 33 views
12

Tablo var ve min-width ve max-height özelliklerini tanımlamak istiyorum. Aşağıdaki örneğe bakın.Tablo özellikleri için minimum genişlik ve maksimum yükseklik

Sorunum şu ki tarayıcı bunu almıyor. td üzerinde tanımladığımda yok sayılırsa, bir öğesinde bir öğesinde tanımladığımda, içerik doğru min ve maksimum genişliğe sahip olur, ancak tablo yine de aynı boyuta sahiptir. (yani çok fazla boş alan var: /)

Bunu nasıl çözebilirim?

DÜZENLEME: Sorun sadece, tablo tam ekran modunda olduğunda ortaya çıkıyor gibi görünüyor. Yine de, bir element maksimum genişlikten daha fazla olmamalıdır!

Örnek: width özelliği min-genişliği ve max-width olarak kullanılmalıdır

<html> 
<head> 
    <style type="text/css"> 
     td { 
      border: 1px solid black; 
     } 

     html,body,.fullheight { 
      height: 100%; 
      width: 100%; 
     } 
     .minfield { 
      max-width: 10px; 
      border: 1px solid red; 
      overflow: hidden; 
     } 
    </style>  
</head> 

<body> 
    <table class="fullheight"> 
     <tr> 
      <td class="minfield"> 
       <div class="minfield"> 
        <p>hallo</p> 
       </div> 
      </td> 
      <td><p>welt</p></td> 
     </tr> 
    </table> 
</body> 
</html> 

cevap

25

Tablo hücreleri için tablo hücrelerinin tanımlanmamıştır. Bkz specification:

"CSS 2.1, tablolar, içi masa, tablo hücreleri tablo sütunları ve sütun grupları min-genişliği ve max-width etkisi tanımlanmamıştır."

Genişliği zorlamak için, table-layout özelliğini "düzeltilmiş" olarak değiştirmeyi deneyebilirsiniz. Spesifikasyon algoritmayı oldukça açık bir şekilde tanımlar.

+0

teşekkürler:/sanırım ... basit bir görev, ama CSS ile mümkün değildir :(, belki birisi bir çözüm :) – Stefan

+0

Neden bunu CSS ile mümkün değildir sence postes? Kodunuzdaki 'min-width' değerini 'width' olarak değiştirirseniz, ilk sütun çok incedir ve ikincisi geniştir. Senin durumunda ne çalışmıyor? 'Genişlik', 'td' ye uygulanmalı, 'max-width' ise 'div' ile hala mükemmel bir şekilde düzeltilmelidir. – Arsen7

+0

iyi, divs :), ama istediğim gibi değil :( – Stefan

-1

Tablolar ve hücreler için minimum genişlik ayarında bir sorun görmüyorum. Bu jsFiddle'a bakın.

HTML:

<table style="border:solid 1px #000;"> 
    <tr> 
     <td id="cell-one" style="border:solid 1px #000;"> 
      test 1 
     </td> 
     <td style="border:solid 1px #000;"> 
      test 2 
     </td> 
    </tr> 
</table> 

ve CSS:

table{width: 90%;} 
td#cell-one{min-width: 20%;} 

genişliği (veya maksimum genişlikte) bağlıdır dakika genişliği unutmayın. Maksimum genişlik genişliği genişler ve min genişlik genişliği veya maksimum genişliği geçersiz kılar. jsFiddle

+0

Bu hiçbir şey yapmaz; Örneğinizdeki hücre genişlikleri her zaman 50/50'dir, çünkü 'min-width' ve 'max-width' özelliklerine göre tablo hücreleri üzerinde hiçbir etkiye sahip değildir. – Slight

4

ayrıca td içinde görünmez bir resim koyabilirsiniz td için min-height özelliğini zorlamak için veya sarma: Başka bir deyişle, dk-width uygulamak elemanın ebeveyn üzerinde genişliği özelliğini ayarlamayı unutmayın div'a sen geldin. İlk durum için Örnek:

<td><img style="float:left;min-height:50px;visibility:hidden;width:0px;">12345</td> 
+3

Neden ... keman: http://jsfiddle.net/LpLDq/ – Stefan

+0

Bu benim için çalışan tek şeydi, bir değişken genişlik tablosundaki hücreleri min-genişlik değerine uydurmaktı. Bunun için çok teşekkürler. – JosephK

İlgili konular