SORU
9 Mayıs 2012, ÇARŞAMBA


css-hücre eşit genişlikte

Tablo bir kabın içinde tablo hücre elemanları belirsiz bir dizi var.

<div style="display:table;">
  <div style="display:table-cell;"></div>
  <div style="display:table-cell;"></div>
</div>

Saf CSS bir şekilde tablo-hücreleri farklı içerik boyutlu içlerinde varsa bile eşit genişlikte olmak için?

Teşekkürler.

Edit: max-genişlik Olması bilerek kaç bence hücreleri var? gerektirecektir

CEVAP
10 Mayıs 2012, PERŞEMBE


Burada hücre belirsiz sayıda çalışan keman: http://jsfiddle.net/r9yrM/1/

Her ebeveyn div (. genişliği çözebilirsiniz ^em>tablo), aksi halde her zamanki gibi. 100% olacak

Hile kullanmaktırtable-layout: fixed;ve bazı her hücre tetiklemek için, 2% burada genişliği. Bu tetikleyici olacaktırdiğertablo algorightm, tarayıcılar boyutlarını gösterilen saygı için çok zor deneyin.
Chrome ile test (ve gerekirse IE8 -) lütfen. Son bir Safari ile sorun değil ama onlarla bu hile uyumluluk hatırlamıyorum.

(İlgili talimatları) CSS:

div {
    display: table;
    width: 250px;
    table-layout: fixed;
}

div > div {
    display: table-cell;
    width: 2%; /* or 100% according to OP comment. See edit about Safari 6 below */
}

DÜZENLE (2013): X, table-layout: fixed; var OS Safari 6 Sakınınyanlış(ya da belki de sadece farklı, diğer tarayıcılardan. çok farklı Prova-okuma CSS2 bilmiyordum.1 REC masa düzeni ;) ). Farklı sonuçlar için hazır olun.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • ElChakotay Andrich

    ElChakotay A

    10 EKİM 2013
  • ThePhestor

    ThePhestor

    22 Mart 2011
  • Vintendo Power

    Vintendo Pow

    2 Ocak 2007