Mobil sayfalar için tablo oluşturma (responsive table)

İnternet sitenizde oluşturduğunuz sayfaların içerisinde tablolar bulunabilir. Bu tabloların küçük ekranlarda veya mobil sayfalarda görülemeyebilir.

Ekranda içeriğin tamamının görüntülemek için tabloya yatay bir kaydırma çubuğu belirecektir

Bu sorunu gidermek için responsive table oluşturulmalıdır.

Bunu yapmak için table etiketlerinin div içerisine alınarak overflow-x:auto yapılmalıdır.

Aşağıda bununla ilgili örnek vardır.

Kodlar

 <div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

Örnek tablo

Burası ekrana sığmayacak kadar uzun yazılmış bir satır olsun.

Bu satırın mobil sayfalarda görünebilmesi sağlanmaktadır. Ekrana sığmama problemi yaşamazsınız.