10 Mobil Uyumlu Tablo

Görüntülenme : 2816

Güncellenme Tarihi : 16.5.2015

Tablolar masaüstü düzenin de harika görünüyorlar, ama mobile sisteme geçince tablolar düzensiz ve kötü görünüyor.

Mobil Uyumlu Tabloların Temelleri

Öncelikle biçimlendirme veya herhangi bir sabit genişlikleri kaldırın.

Önce:

<table width="540">
  <tr>
    <td width="300">Header 1</td>
    <td width="60">Header 2</td>
    <td>Header 3</td>
    <td>Header 4</td>
  </tr>
</table>

Sonra:

<table>
  <tr>
    <td>Header 1</td>
    <td>Header 2</td>
    <td>Header 3</td>
    <td>Header 4</td>
  </tr>
</table>

Bu sütun genişliklerini kontroletmek güzel olurdu ama tarayıcı yapmak en iyisi.

Tablolarınız için önce bazı güzel dolgu ve çerçever stilleri ayarlayın.

table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #bbb
}
td,th {
    border-top: 1px solid #ddd;
    padding: 4px; 8px;
}

Bazı çizgili satırlar (nth-child IE8 tarafından desteklenmiyor) bunun için aşadaki kodu kullanın.

tbody tr:nth-child(even)  td { background-color: #eee; }

Mobil Uyumlu Tablo

Tablo düzeninizi bozmadan, yatay bir şekilde kaydırmaya izin vermektedir. Öncelikle değiştirmek zorunda olduğumuz display: block; ve overflow-x:  auto; – Sadece küçük cihazlarda bunu kullanmak için medya sorgusu kullanabilirsiniz.

@media screen and (max-width: 640px) {
	table {
		overflow-x: auto;
		display: block;
	}
}

 

MASAÜSTÜ

Beverage Short (8 oz) Tall (12 oz) Grande (16 oz) Venti (20-24 oz) Trenta (31oz)
Brewed Coffee 180mg 260mg 330mg 415mg -
Brewed Decaf Coffee 15mg 20mg 25mg 30mg -
Caffè Americano 75mg 150mg 225mg 300mg -

Bu tablo (320px genişliğinde) mobilde kullanıcıya alt kısımında bulunan tabloları kaydırma özelliğiyle kolaylık sağlamaktadır.

MOBİL (sağa kaydırma)

Beverage Short (8 oz) Tall (12 oz) Grande (16 oz) Venti (20-24 oz) Trenta (31oz)
Brewed Coffee 180mg 260mg 330mg 415mg -
Brewed Decaf Coffee 15mg 20mg 25mg 30mg -
Caffè Americano 75mg 150mg 225mg 300mg -

Diğer seçenekleri şimdi çok daha güçlü...

1. Footable – jQuery

respt1-d

Mobile - 2nd row clicked.

Mobilde 3. sütundan sonraki sütunlar alt tarafa geçmektedir.

Mobilde 2. satırdaki gibi ilk 3. sütundan sonrasını alt tarafa atarak küçük cihazlarda tablonun bozulması engelleniyor.

Github: github.com/bradvin/FooTable
Demo and Docs: fooplugins.com/footable-demos

 2. Foundation Zurb – Kilitli İlk Sütün

respt2-d

Mobile - first column is locked.

Mobile geçince ilk sütunu kilitler.

Masaüstü düzende yatay düzgün bir şekilde görünürken mobile geçince ilk sütunu kilitleyerek diğer sütunların kaymasıyla mobilde bozulmayı önlenmiş.

Demo: zurb.com/playground/projects/responsive-tables/index.html

3. Stacktable

respt3-d

Mobile - everything is one column.

Mobilde her şey bir sütundur.

Masaüstü düzende yatay bir şekilde duran tablolar mobil cihazlarda başlık satırı ve alt satırlarıyla alt alta sıralanıyor.

Demo: johnpolacek.github.io/stacktable.js/
Github: github.com/johnpolacek/stacktable.js

4. Mobil Uyumlu Tablo

respt4-d

respt4-m

Mobilinde yazılar ölçeklendirilir

Bu oldukça ilginç jQuery komutu veri özelliklerine göre tablonun yazı tipi boyutunu dönüşebilecek.

Yukarıdaki örnekte, tablo etiketinin iki özellikleri data-max = "30" ve data-min = "11" içeren minimum ve maksimum piksel yazı tipi boyutunu göstermektedir.

Github: github.com/ghepting/jquery-responsive-tables
Demo: garyhepting.com/jquery-responsive-tables/

5. Filament Grubu – Tablo Bölücü

swipe-minimap

Bu jQuery çözümü tabloda ekran için farklı her türlü seçenekler sunmaktadır.

fgmode-switch

Mobil düzende seçilen sütun adına göre sıralama gerçekleştirmektedir.

Github: https://github.com/filamentgroup/tablesaw

6. TablePress – WordPress

respt6-d

respt6-m

Mobil görünüm de başlık sütunu kilitlidir.

Masaüstü düzeninde yatay bir şekilde duran tablo mobil düzene geçtiğinde üstarafda bulunan başlık sütununu sol tarafa dikey sıralayıp kilitler.

Tablonun Demosu İçin Tıklayın: tablepress.org/demo/
Mobil Uyulu Uzatma: tablepress.org/extensions/responsive-tables/

7. ng Mobil Uyumlu Tablo

respt7-d

Mobile - data is presented vertically.

Mobilde veri dikey sunulmaktadır.

Yatay pozisyonda duran tablonuz mobilde geçince dikey bir pozisyon alacaktır.

Makale: netgenlabs.com/Blog/Responsive-Data-Tables-with-ngResponsiveTables-jQuery-plugin
Demo: http://netgen.github.io/jquery.ngResponsiveTables/

8. Codepen (Charlie Cathcart)

Bu örnek öncekiler gibi ancak herhangi bir JavaScript olmadan kayıt yapmak için CSS i kullanır.

Demo: http://codepen.io/pixelchar/pen/rfuqK

9. Codepen (Dudley Story)

Bu veriler tablo hücrelerine niteliklerini oluşturmak için kısa (non-jQuery) Javascript kullanır. Sonra CSS medya sorgu kullanan bir mobil ekran biçimlendirmek için özelliklerini alır.

Desktop layout

Masaüstü düzeni

Mobile

Mobil düzeni

Güzel bir çalışma.

Demo:http://codepen.io/dudleystorey/pen/Geprd

10. Codepen (Geoff Yuen)

Javascript yok ama, gereken verileri her hücreye girilmesi sağlanıyor.

resp11d

Masaüstü düzeni

Mobile LAyout

Mobil düzeni

İLETİŞİM

Antalya Web Tasarım® bir Karayel Tasarım® markasıdır.

0242 344 1020 - info@antalyawebtasarim.com

Tüm hakları saklıdır.

© 2015