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ı.

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

Sayfa planlama sihirbazı grid-template-areas

CSS Izgara ile sihirbazlık yapıyoruz. grid-template-areas ve grid-area özelliklerini açıklıyoruz. Devamını oku

SVG ikonlarımıza gölge vermek

05 April 2019 tarihinde yayınlandı.