<tt id="q85uj"><address id="q85uj"></address></tt>

  1. <tt id="q85uj"><span id="q85uj"></span></tt>
    <i id="q85uj"><address id="q85uj"></address></i>

    <u id="q85uj"></u>

  2. <b id="q85uj"><address id="q85uj"></address></b>
    <ruby id="q85uj"></ruby><acronym id="q85uj"></acronym>
      <tt id="q85uj"><address id="q85uj"></address></tt>
      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]

      聯系云軒總監微信

      微信
      夫妻性生生活视频 - 视频 - 在线观看 - 电影影院 - 品赏网