• <rt id="adimh"></rt>
  • <cite id="adimh"><noscript id="adimh"></noscript></cite>

      1. <rt id="adimh"></rt>
      <rt id="adimh"><menu id="adimh"></menu></rt>
      <video id="adimh"></video>

        <i id="adimh"><address id="adimh"><sup id="adimh"></sup></address></i>

        1. <cite id="adimh"></cite>
          <rt id="adimh"><optgroup id="adimh"></optgroup></rt>
        2. 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]

          聯系云軒總監微信

          微信
          成人视频免费在线观看 - 视频 - 在线观看 - 电影影院 - 品赏网