把excel表格直接貼上並自動轉成響應式(RWD)表格的線上產生器

在WordPress想要製作響應式表格，除了靠Elementor或一些專用的表格外掛之外，另可以使用另一種非常方便的「RWD表格線上產生器」。

你可以在excel先把表格做好，再貼到這個「RWD表格線上產生器」就能自動產生響應式(RWD)表格了。

RWD表格線上產生器 : http://www.tablesgenerator.com/html_tables

1、先在excel中把資料打好，並選取好範圍後先右鍵複製。

2、前往「RWD表格線上產生器」並如下圖

3、直接貼上剛剛複製的並按下Load

4、有表頭需要合併的話可以先合併

5、你可以替表頭(點擊第一個單元格，按住左鍵，往右拖，即A1~G1的儲存格)設定一下背景或字色

6、做好表格後，點擊表格下面的Generate按鈕，再按下make the able responsive，替表格加上響應式功能。

7、複製代碼

7.1上圖中①處

7.1.1 請複製上圖中①處的CSS碼，注意不要複製到<style>與</style>

7.1.2 安裝此外掛【WP Add Custom CSS】，它可以讓你每篇文章後面都可以自訂CSS。

7.1.3 安裝外掛【WP Add Custom CSS】之後，在編輯該篇文章的末端(如下圖)，貼上剛剛在上圖中①處的CSS碼。

7.2 上圖中②處複製好，貼到文章中，如下圖在「文字」模式中貼上。

8、存檔並在前台觀看結果

▼這是經上面流程後的畫面，你可以縮放瀏覽器的寬度來看它的變化，應會發現它的文字都會很適中的呈現且並不會超出螢幕範圍

▼這是excel表格複製直接貼到文章中的畫面，你可以縮放瀏覽器的寬度來看它的變化，應會發現它的文字會擠在一起且很不好閱讀。

外掛	簡介	費用		語系	相關教學
【Smartsupp Live Chat】	中文線上即時客服，線上即時對答。訪客屏幕錄製，在您的商店中觀看訪客的行為。 你看到他的屏幕，鼠標移動，點擊和他填寫的表單。	免費	付費	中	本站	外站

▼直接截圖一下做比較

是不是差很多，對吧!

這個「RWD表格線上產生器」超實用，可要好好收藏一下喔!