Tabel responsif
desain responsif berguna ketika Anda ingin konten halaman web mobile Anda untuk menanggapi perangkat pengguna, seperti ukuran layar dan orientasi.
Dengan nama kelas sederhana, jQuery Mobile menyadari ukuran layar yang tersedia pengguna dan secara otomatis mengubah ukuran sendiri untuk menunjukkan konten yang relevan untuk pengguna tertentu.
tabel responsif memungkinkan kita untuk menampilkan set besar data tabular yang akan terlihat menarik untuk kedua ponsel dan desktop.
Ada dua jenis tabel responsif: reflow dan kolom beralih.
reflow Tabel
Mode reflow posisi data tabel horizontal hingga mencapai ukuran minimum, maka semua baris dikelompokkan bersama secara vertikal.
Membuat tabel, menambahkan data-role = "meja" dan kelas "ui-responsive" di <table> elemen:
Untuk tabel responsif untuk bekerja dengan benar, Anda harus menyertakan <thead> dan <tbody> elemen.
Jangan gunakan rowspan atau atribut colspan; mereka tidak didukung dalam tabel responsif.
Kolom Beralih Tabel
Kolom "beralih" mode akan menyembunyikan kolom ketika ada tidak cukup lebar untuk menampilkan data.
Untuk membuat tabel kolom toggle, tambahkan berikut ke <table> elemen:
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
id="myTable" >Secara default, jQuery Mobile akan menyembunyikan kolom dari sisi kanan meja. Namun, Anda diperbolehkan untuk menentukan kolom yang harus disembunyikan atau ditampilkan dalam urutan tertentu. Menambahkan atribut data prioritas untuk header tabel (<th>) dan menentukan nomor antara 1 (prioritas tertinggi) sampai 6 (prioritas terendah):
<th>I
will never be hidden</th>
<th data-priority="1" >I
am very important - I will probably not be hidden</th>
<th data-priority="3" >I
am less important - I could be hidden</th>
<th
data-priority="5" >I am not that important - there is a good
chance that I will be hidden</th>Jika Anda tidak menentukan prioritas untuk kolom, kolom akan gigih dan tidak tersedia untuk bersembunyi.
Menempatkan semuanya bersama-sama dan Anda telah membuat tabel kolom beralih! Perhatikan bahwa kerangka secara otomatis menambahkan tombol di sudut kanan atas tabel. Hal ini memungkinkan pengguna untuk memilih kolom untuk menampilkan dalam tabel:
Contoh
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
id="myTable" >
<thead>
<tr>
<th
data-priority="6" >CustomerID</th>
<th>CustomerName</th>
<th data-priority="1" >ContactName</th>
<th data-priority="2" >Address</th>
<th
data-priority="3" >City</th>
<th
data-priority="4" >PostalCode</th>
<th
data-priority="5" >Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alfreds
Futterkiste</td>
<td>Maria Anders</td>
<td>Obere Str. 57</td>
<td>Berlin</td>
<td>12209</td>
<td>Germany</td>
</tr>
</tbody>
</table>
Cobalah sendiri " Untuk mengubah tombol meja beralih teks, menggunakan atribut data kolom-btn-text:
Contoh
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
data-column-btn-text="Click me to hide or show columns!"
id="myTable"> Cobalah sendiri " Tabel styling
Gunakan "ui-shadow" kelas untuk menambahkan bayangan ke meja:
menambahkan bayangan
<table data-role="table"
data-mode="columntoggle" class="ui-responsive ui-shadow"
id="myTable">
Cobalah sendiri " Untuk meja styling lanjut, gunakan CSS:
Menambahkan batas bawah untuk semua baris tabel
<style>
tr {
border-bottom: 1px solid #d6d6d6;
}
</style>
Cobalah sendiri " Menambahkan batas bawah untuk semua <th> elemen dan warna latar belakang untuk semua bahkan baris tabel
<style>
th {
border-bottom: 1px solid
#d6d6d6;
}
tr:nth-child(even) {
background: #e9e9e9;
}
</style>
Cobalah sendiri "