Tablo kolon genişliğini css ile ayarlama

Tablolarda bazen içeriğe göre tablonun genişlemesini istemeyiz veya içeriği aşağı kaymasını engellemek isteriz. İşte çözüm hemde Gmail’den.

Google bize web hakkında örnekleri ile de yardım ediyor. Gmail’de tablo genişliğini sabitlemenin daha doğrusu metinin tablo genişliğine göre overflow:hiden uygulamasını gösteren güzel bir yöntem

.grid {
	table-layout: fixed;
} 

.grid * td {
    empty-cells: show;
    overflow: hidden;
    width: 100%;
}

Gmail Tablo genişliği

Güzel bir ayrıntıyı yakalamışlar. table-layout: fixed; tanımı işin püf noktası

Örnek sayfayı görmek için tıklayınız.

Kayanak: http://blog.opencomponentry.com/2007/08/22/gmail-table-column-sizing-css-fun/

11 Yorum (Yorum Ekle)

neturfa diyor ki:

Temmuz 5, 2011, 13:47

Fatih Hocam Tabloya Uzun Yazı Yazdığım Zaman Kendi Kendine Genişliyor Alt satıra geçmiyor onu nasıl önliyeceğim ?

Cevapla

fatih.hayrioglu diyor ki:

Temmuz 5, 2011, 19:32

sabit genişlik vermeyi deneyin.

Cevapla

fatih.hayrioglu diyor ki:

Şubat 4, 2008, 10:22

yakında bir e-doküman çıkaracağım

Cevapla

del diyor ki:

Şubat 3, 2008, 14:39

Fatih Hocam Acaba Sizin E-kitap’ ınız varmı css ile ilgili

Cevapla

fatih.hayrioglu diyor ki:

Ocak 25, 2008, 14:42

kodu yardımcı olacaktır size

Cevapla

BiLGeHaN diyor ki:

Ocak 24, 2008, 18:06

fatih.hayrioglu bir sorum oLacak TabLonun İçine fRaMe Yerleştirmek iStiyoRum NasıL oLaCaK ?

Cevapla

fatih.hayrioglu diyor ki:

Ocak 22, 2008, 21:24

h1{
white-space:nowrap;
width:150px;
overflow:hidden;
}

bu kodu bir dene

Cevapla

Harun diyor ki:

Ocak 22, 2008, 12:29

şimdi bunu tablo ile yapıyoruz da peki
div ve float ile yaptığımız zaman bir çözümü var mıdır?
ben mesela http://www.yetenek.com/v3 adresinde bunu div ile yaptım ama başlıkların 2 satıra kaymamasını sağlamak istiyorum. buna bezner bi yöntem önerecek var mı?

Cevapla