CSS Duyarlı Tablo
Duyarlı Tablo
Ekran tam içeriği görüntüleyemeyecek kadar küçükse, duyarlı bir tablo yatay bir kaydırma çubuğu görüntüler:
İlk adı | Soyadı | Puan | Puan | Puan | Puan | Puan | Puan | Puan | Puan | Puan | Puan | Puan | Puan |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Jill | Smith | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
Havva | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
Adem | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
overflow-x:auto
Duyarlı hale getirmek için <table> öğesinin etrafına bir kap öğesi (<div> gibi) ekleyin :
Örnek
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
Not: OS X Lion'da (Mac'te), kaydırma çubukları varsayılan olarak gizlenir ve yalnızca kullanıldığında gösterilir ("taşma: kaydırma" ayarlanmış olsa bile).
Daha fazla örnek
Bu örnek, süslü bir tablonun nasıl oluşturulacağını gösterir.
Bu örnek, tablo başlığının nasıl yerleştirileceğini gösterir.
CSS Tablosu Özellikleri
Property | Description |
---|---|
border | Sets all the border properties in one declaration |
border-collapse | Specifies whether or not table borders should be collapsed |
border-spacing | Specifies the distance between the borders of adjacent cells |
caption-side | Specifies the placement of a table caption |
empty-cells | Specifies whether or not to display borders and background on empty cells in a table |
table-layout | Sets the layout algorithm to be used for a table |