Waku Piece

純CSS實作 RWD響應式Table

02/16/2024

當我們辛辛苦苦設計完前端精美的表格之後，結果用手機一看發現跑版亂七八糟，

有什麼簡單快速的解決方法可以解決呢?

最簡單的其中一種方法，我們可以直接設定電腦版和手機版顯示不同的table

使用不同的table結構

您可以在相同的頁面上放置兩個不同的table，兩個都設計為在特定的設備尺寸下最佳顯示。然後，您可以使用CSS媒體查詢來控制哪個table應該被顯示。

優點

清晰的布局控制：這種方法讓您能夠針對不同的裝置尺寸設計最適合的布局，而不需要擔心元素位置的動態變化或DOM操作。

維護簡單：因為每個table都是獨立的，所以在需要對其中一種裝置版面進行調整時，您只需修改對應的table即可。

缺點

內容重複：在HTML中保留兩個不同的table意味著有重複的內容，如果table的內容很多很大 ，可能會對SEO和頁面加載時間產生影響。

更新維護：當需要更新表格內容時，您可能需要在兩個地方進行更改，增加了維護工作量。

總之，響應式的表格可以設計地很簡單也可以很複雜，也可以選擇引用Bootstrap的Components、使用Javascript撰寫等等。直接設定電腦版和手機版顯示不同的table是一種簡單有效的解決方案。然而，它也有其局限性，需要權衡這種方法的利弊，以決定是否適合您的具體需求。