10 Mobil Uyumlu Tablo

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

16.05.2015|Kategori : JQuery
Sosyal Medya Aracılığıyla Paylaş

Yorumlar

Yorum Yaz