在Blogger如何設定「自動調整表格寬度」

在Blogger設定 「自動調整表格寬度」

今天在在整理自己部落格文章時發現，好像從來沒用手機去看過自己的網頁呈現模式(因為當初在建置時就是用RWD去建置與調整)，但意外往往就在這個時候發生，用手機看某篇文章時竟然發現表格竟然超出螢幕，當下的眼神除了三條線還是三條線。

但身為一位專業的數位行銷人才，懂點CSS來做調整在現在這個時代似乎也是基本功！？

以下整理了一個快速解決的方案來協助大家處理這個問題：

一、編輯文章→切換到HTML模式→找到<table style…..>，新增以下語法：

<table style="width: 100%; table-layout: fixed;" >

二、再來找到 <colgroup>  <col width="X">......</colgroup> 這一段語法，這段 HTML主要設定欄寬，每個 colgroup的 width 設定不同px值來代表網頁呈現寬度。

將每個colgroup的width的值，改成完全百分比(總值為100%)，這樣講很很難懂我知道~我們來換句話說：

假設該區間有五個colgroup，那這5個colgroup 的百分比數值加總就必須是 100%，例如 20%、20%、20%、20%、20%。

按照以上步驟操作，您的表格在不論在桌上型電腦或是手機上，皆能順利順利觀看喔！

希望以上教學有幫助到大家^^

撰文/陳建夆