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

在維護部落格的過程中，你是否也遇過「桌機看起來正常，但手機卻整個跑版」的窘境？

我最近就發現自己在 Blogger 上的一篇文章表格超出了螢幕，畫面慘不忍睹。

原本以為有做 RWD（響應式網頁設計），就能高枕無憂，結果還是中招。

好消息是，這個問題其實只要懂一點點 CSS 和 HTML 就能快速解決。

以下整理出最簡單的設定方法，讓你的 Blogger 表格在各種裝置上都能完美對齊。

為什麼表格會在手機上「超出畫面」？

Blogger 在預設情況下，表格的寬度通常是以「固定像素（px）」設定的，而手機的螢幕寬度比電腦小很多，導致表格內容無法自動縮放，最終就會「超出版面」。

這時候，我們只要讓表格的寬度以「百分比」取代「像素值」，並告訴瀏覽器要自動調整，就能完美解決。

步驟教學

步驟一：切換至 HTML 模式，修改表格樣式

1. 打開要修改的 Blogger 文章。
2. 切換至 HTML 模式。
3. 找到 <table style…..> 這一段程式碼。
4. 修改為以下語法：

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

這樣的設定能讓表格寬度自動依照螢幕寬度調整，不再被固定值限制。

table-layout: fixed; 可以讓欄位寬度依據設定平均分配，避免因內容過長而撐開。

步驟二：修改 <colgroup> 內的寬度設定

<colgroup>
  <col width="120">
  <col width="180">
  <col width="150">
</colgroup>

這些 width="X" 表示欄位固定像素寬度，導致手機上無法自動縮放。
改成以下格式即可：

<colgroup>
  <col width="33%">
  <col width="33%">
  <col width="34%">
</colgroup>

只要確保每個欄位的百分比加總為 100%（例如三欄各 33%、四欄各 25%），就能自動適應各種螢幕寬度。

補充說明

如果你常在部落格插入表格，也可以在 Blogger 的「佈景主題 → 進階 → 新增 CSS」中加入以下語法。

table {
  width: 100%;
  table-layout: fixed;
  word-wrap: break-word;
}

這樣所有表格都會自動適應螢幕，甚至內容太長時也不會被撐開或溢出。

懂一點 HTML/CSS，是行銷人必備的基礎能力

身為行銷人，我們雖然不一定要成為工程師，但懂一點基礎的 HTML、CSS，能幫助我們在內容呈現上更靈活、修正問題也更快。

表格超出版面的問題看似小事，但其實牽涉到「使用者體驗」。當訪客在手機上閱讀時，如果畫面歪斜或要左右滑動，往往會直接關掉頁面。

優化這些細節，就是在默默提升 SEO 與留存率。

希望這篇教學能幫助到你，讓你的 Blogger 頁面在各裝置上都能完美呈現！

撰文/陳建夆