Menu

響應式HTML表格技術及實例

<返回列表

值得慶幸的是,就頁面布局而言,古老的HTML表可能早已過時。但就其初衷而言,它仍然很強大:顯示表格數據。它們仍然非常有用,并且通過CSS和jQuery等工具得到了進一步的增強。

移動桌面上的大屏幕并不總是很棒的體驗。如果處理不當,列可能會被切斷,從而無法讀取。這只會導致用戶體驗不佳。

值得慶幸的是,我們可以使用一些技術使表格在移動設備上更方便用戶使用。讓我們來探討一些方法,以確保數據在每個屏幕上都是可訪問的。我們還將提供一個工作示例,以便您可以看到它的實際操作。

水平滾動

這里有一個超級簡單的方法,讓移動用戶訪問一個非常寬的表。添加容器元素overflow-x屬性設置為汽車允許在小屏幕上水平滾動。不一定是最優雅的做事方式,但至少內容是可訪問的。特別感謝W3學校為了這個概念

具有重新定位表標題的可折疊單元格

這種方法比滾動要方便一些,盡管設置起來比較困難。在移動屏幕上td單元格顯示為,這樣就可以把它們疊在一起。然后,用一些詭計data-th屬性和:之前CSS選擇器,表的標題基本上從頂行移到左邊。

下面是對這個選項稍有不同的看法。而不是使用data-th屬性,則通過CSS定義表頭項內容財產。雖然效果基本相同,但是維護代碼的要求是不同的。這個解決方案可能更適合不包含很多表的較小站點。

帶水平滾動的靜態左表標題

這里我們看到一個表頭(thead)這是為了浮動:左通過CSS和保持靜態定位在小屏幕上。數據行被轉換成列,這樣就形成了一個組織良好的表。使用一些JavaScript來保持表頭與其他單元格的高度和對齊方式相同。

元素查詢

元素查詢關注特定元素的大小要求,而不僅僅是瀏覽器窗口的尺寸。他們在這一點上是實驗性的,但是你可以在等式(它還提供了一個JS庫來使用)。在下表示例中td單元格以各種列布局排列。整個過程都是基于表元素的寬度。這絕對是一個值得關注的有趣技巧。

數據表jQuery插件

這個數據表jQuery插件為標準HTML表添加了各種有用的功能。而它反應敏捷的能力是相當驚人的。腳本將根據屏幕大小自動隱藏列??梢酝ㄟ^單擊(或觸摸)查看隱藏的數據。您還可以靈活地為特定列設置優先級。下面的示例顯示了一個響應表的所有優點。

選擇最佳技術

上面的技術實際上只是開發人員對響應表所做操作的一個小樣本。它們從極其簡單的到復雜的、依賴腳本的混合物。

當你的項目最終確定了一些解決方案時:

  1. 考慮要創建的表的大小以及它們將包含的數據類型。
  2. 確定您對哪些依賴關系感到滿意。
  3. 考慮一下自動化整個過程的可能性。

如果一個網站的維護規模比較大的話,你可能只會擔心一個或兩個網站。但是對于較大的站點,您需要考慮如何在添加新表和更改現有表時保持一切順利運行。

例如,使用從data屬性可能非常有效,但也可能很難維護。如果非設計者負責添加內容,則尤其如此。在這種情況下,嘗試并自動化創建過程是值得的數據屬性通過PHP或其他代碼。這樣,負責內容的人就不必擔心處理代碼了。

表格對設計師來說是一個獨特的挑戰。他們早在移動網絡出現之前就被想象出來了。但是只要有一點創造力,你就可以建立一個很棒的用戶體驗——即使是在最小的屏幕上。


最新網站設計資訊
企業網站建設

企業網站建設優化一條龍,多年品牌網站設計,營銷網站開發,手機網站制作,響應式網站設計

聯系我們

電話:18868949445QQ:1611387063 郵箱:[email protected]

聯系云軒總監微信

微信
日韩久久久久久中文人妻,老熟女BBXX,japanese日本人妻共享,丝袜无码一区二区三区