jQuery Mobile 表格

響應式表格

響應式設計一般用于適配用戶各種移動設備。

我們只需要使用一個簡單的類名，jQuery Mobile 就能根據屏幕的尺寸自動調整頁面內容。

響應式表格讓頁面內容在移動端和桌面設備上能夠很好的適配。

響應式表格有兩種類型： reflow(回流) 與 列切換。

回流表格

回流模型表格在屏幕尺寸足夠大時是水平顯示，而在屏幕尺寸達到足夠小時，所有的數據會變成垂直顯示。

創建表格，在

實例

嘗試一下 ?

對于響應式表格，你必須包含 和

元素。

不要使用 rowspan 或 colspan

屬性; 響應式表格中是不支持這兩個屬性的。

列切換

列切換模型會在寬度不夠時隱藏數據。

列切換的表格創建方式如下：

默認情況下，jQuery Mobile 會先隱藏表格右側的列。但是，你可以在表格頭部(

)通過添加 data-priority 屬性指定隱藏列的順序，data-priority 的值可以是 1 (最高優先級) 到 6 (最低優先級):I will never be hidden我是非常重要的列 - 我不會被隱藏我是重要的列 - 我可能被隱藏我是不怎么重要的列 - 我最先被隱藏

如果你沒為列指定優先級，則列會一直存在，不會被隱藏。

把上面的兩段代碼組合起來即可創建一個列切換的表格，這樣用戶就可以自定義要隱藏表格的哪些列：

實例

data-mode="columntoggle" class="ui-responsive"

id="myTable">

data-priority="6">CustomerID

CustomerNameContactNameAddress

data-priority="3">City

data-priority="4">PostalCode

data-priority="5">Country

1Alfreds

Futterkiste

Maria AndersObere Str. 57Berlin12209Germany

嘗試一下 ?

我們可以使用 data-column-btn-text 屬性來修改切換表格的文本：

實例

data-mode="columntoggle" class="ui-responsive"

data-column-btn-text="點我顯示或隱藏列!"

id="myTable">

嘗試一下 ?

表格樣式

我們使用 "ui-shadow" 類來為表格添加陰影：

添加陰影

data-mode="columntoggle" class="ui-responsive ui-shadow"

id="myTable">

嘗試一下 ?

使用 CSS 來進一步設置表格樣式:

為所有行添加底部邊框

tr {

border-bottom: 1px solid #d6d6d6;

}

嘗試一下 ?

為

元素添加按鈕及為偶數行添加背景

th {

border-bottom: 1px solid

#d6d6d6;

}

tr:nth-child(even) {

background: #e9e9e9;

}

嘗試一下 ?

總結

以上是生活随笔為你收集整理的手机端html表格,jQuery Mobile 表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。