如何固定列高？解鎖試算表與網頁設計的完美比例

「唉呀！我的試算表排版跑掉了！」、「怎麼每次匯出資料，表格就變得亂七八糟？」相信許多在工作上常常跟試算表打交道的夥伴，一定都曾遇過類似的困擾。尤其是當你辛辛苦苦排版好的表格，卻因為各種原因（像是輸入了太多文字、複製貼上時的參數跑掉，或是不同軟體間的相容性問題），導致原本整齊的列高突然變得亂七八糟，這時候真的會讓人一個頭兩個大！別擔心！今天，我就要來跟你好好聊聊，如何固定列高，讓你輕鬆告別表格失控的惡夢，無論是專業的試算表製作，還是網頁設計中的表格應用，都能達到視覺上的完美比例。

為什麼「固定列高」如此重要？

在深入探討「如何固定列高」的具體方法之前，我們有必要先釐清，為什麼這件事這麼重要？

• 提升閱讀效率與專業形象：想像一下，一份內容豐富的報告，如果表格的行高參差不齊，看起來是不是很不專業，甚至會讓人難以閱讀？統一且適當的列高，能夠讓資訊一目了然，大幅提升閱讀的流暢度，同時也展現了製作者的細心與專業。
• 確保資料完整性：在某些情況下，過高的列高可能會導致某些內容被「截斷」，或是因為空間過於鬆散，而使我們忽略了部分重要的資訊。固定列高，可以確保所有資料都能完整呈現，不會有遺漏。
• 優化版面配置：無論是印刷品還是網頁，整齊劃一的表格結構，都能讓整體版面更加美觀、協調。這對於需要大量呈現數據的報表、產品列表，甚至是網頁上的排版，都至關重要。
• 跨平台與跨軟體的一致性：這點尤其重要！不同軟體、不同裝置，甚至是不同列印設定，都可能影響表格的顯示。學會如何「固定」列高，能在很大程度上，確保你在不同環境下看到的表格，都能維持原本的樣貌。

說真的，我自己在剛開始接觸試算表的時候，也是常常被這個「列高」問題搞得焦頭爛額。有時候，明明我覺得排得很好看了，但隔天打開，或是分享給同事，就發現整個走樣。後來我才發現，原來很多時候，我們只是少了一個「固定」的概念。經過不斷的摸索與實踐，我才慢慢掌握到幾個實用的技巧，今天就來毫不藏私地分享給大家！

試算表中「固定列高」的秘訣

在我們最常使用的試算表軟體，例如 Microsoft Excel、Google Sheets，甚至是 Numbers，都有各自處理列高的方式。以下我將針對這些常見的軟體，提供具體的步驟與技巧。

在 Microsoft Excel 中固定列高

Excel 提供了非常直觀的列高調整功能，要固定它，其實並不難，但關鍵在於「手動設定」。

1. 選取目標列：首先，點擊你想要調整的列的編號（例如：第 5 列），就可以選取整列。如果你想一次調整多列，可以按住 Ctrl 鍵（或 Mac 上的 Command 鍵）並點擊不同的列編號，或是點擊第一列編號後，按住 Shift 鍵，再點擊最後一列編號，一次選取連續的多列。
2. 右鍵選取「列高」：選取完畢後，在任一選取的列編號上按一下滑鼠右鍵。在彈出的選單中，你會看到「列高」這個選項。
3. 輸入期望的數值：點擊「列高」後，會跳出一個小視窗，讓你輸入「列高」的數值。這個數值是以點（Point）為單位。一般來說，預設的列高大約在 15 點左右，你可以根據你的內容和排版需求，輸入一個你想要的固定數值，例如 20、25，甚至是 30 點。
4. 確認調整：輸入完數值後，點擊「確定」。你會發現，所有你選取的列，其高度都會被設定成你剛剛輸入的固定數值。

我的經驗談： 很多人可能會誤以為，只要把內容塞進去，Excel 就會自動調整。但這點其實是誤解。Excel 預設是「自動調整列高」，意思是當你輸入的內容過多，超出目前的列高時，它會「自動增加」列高以容納內容。但如果你想要「固定」，就必須「手動」介入，強制設定一個高度。所以，當你發現內容有時候會被切斷，那就是因為你設定的固定列高，不夠容納你輸入的最長內容。這時候，你可能就要評估，是內容需要精簡，還是列高需要再增加一點。

進階技巧： 有時候，你會希望表格的欄寬和列高是固定的，不會因為內容改變而跑掉。在 Excel 中，你還可以同時調整欄寬。方法跟調整列高非常類似：選取目標欄（點擊欄位名稱 A、B、C…），右鍵點選「欄寬」，輸入期望的數值即可。這樣一來，你的表格就能有更穩定的結構。

在 Google Sheets 中固定列高

Google Sheets 的操作邏輯和 Excel 非常相似，同樣是透過手動設定來達成固定列高的目標。

1. 選取目標列：與 Excel 相同，點擊你想要調整的列的編號，或按住 Shift/Ctrl 鍵選取多列。
2. 右鍵選取「調整列高」：在選取的列編號上按右鍵，選擇「調整列高」。
3. 輸入期望的數值：在彈出的視窗中，選擇「指定高度」，然後輸入你想要的數值。Google Sheets 的數值單位也大致是以點（Point）的概念來呈現。
4. 確認調整：點擊「確定」即可。

小提醒： Google Sheets 在預設情況下，也傾向於「自動調整」列高以配合內容。所以，如果你想要固定，同樣需要手動設定。另外，Google Sheets 有時候在多人協作時，可能會出現版面緩慢調整的狀況，這時候更需要確認你的固定設定是否已經生效。

在 Numbers (Mac) 中固定列高

對於 Mac 使用者來說，Numbers 也是一個常見的試算表工具。它的介面設計相對簡潔。

1. 選取目標列：點擊列編號進行選取。
2. 尋找「格式」面板：在 Numbers 中，你通常會在螢幕右側找到一個「格式」面板。
3. 在「表格」分頁設定：在「格式」面板中，切換到「表格」分頁。
4. 調整「列高」：你會看到「列高」的選項，可以直接輸入你想要的數值。
5. 「符合內容」選項：這裡有一個很重要的選項，叫做「符合內容」。如果你希望列高固定，請務必「取消勾選」這個選項。勾選它，Numbers 也會試圖自動調整列高。

我的建議： Numbers 在「符合內容」這個選項上，做得特別明顯。如果你想要完全的控制權，就一定要記得把這個勾給取消。這能確保你設定的任何高度，都不會被後續輸入的內容給輕易打亂。

網頁設計中「固定列高」的實現（CSS 應用）

聊完了試算表，我們來談談在網頁設計的世界裡，「如何固定列高」。這部分主要會涉及到 CSS（Cascading Style Sheets）的應用。相較於試算表，網頁的彈性更高，但也意味著我們需要更精準地控制。

在網頁中，我們通常會使用 `

1. 設定 `height` 屬性

這是最直接的方法，我們可以直接透過 CSS 的 `height` 屬性來指定表格列的高度。

<style>
.my-table {
  border-collapse: collapse; /* 讓邊框合併 */
  width: 100%; /* 讓表格佔滿寬度 */
}

.my-table th, .my-table td {
  border: 1px solid #ccc; /* 設定邊框 */
  padding: 8px; /* 設定內距 */
  text-align: left; /* 文字靠左 */
}

.my-table .fixed-row-height {
  height: 50px; /* 這裡設定固定的列高 */
  overflow: hidden; /* 如果內容超出，就隱藏 */
  text-overflow: ellipsis; /* 超出部分顯示省略號 (可選) */
}
</style>

<table class="my-table">
  <thead>
    <tr>
      <th>標題一</th>
      <th>標題二</th>
    </tr>
  </thead>
  <tbody>
    <tr class="fixed-row-height">
      <td>這是第一列的內容，可能會比較短。</td>
      <td>這是第二列的內容，即使很長，列高也會固定為 50px。</td>
    </tr>
    <tr>
      <td>這是另一列，沒有設定固定高度。</td>
      <td>這列會自動適應內容。</td>
    </tr>
  </tbody>
</table>

說明：

• 我們為特定的 `
  

我的看法： 這種方法最為直接，也最容易控制。缺點是，如果內容真的非常多，且你又不想截斷，那麼可能就需要考慮改變設計，或者使用其他方法。

2. 使用 `line-height` 和 `max-height` 組合

有時候，我們不希望內容被完全截斷，而是希望它在一個固定的範圍內顯示，如果內容較少，就看起來比較寬鬆，內容較多時，也不會溢出。這時候，`line-height` 和 `max-height` 的組合就很實用。

<style>
.flexible-table {
  border-collapse: collapse;
  width: 100%;
}

.flexible-table th, .flexible-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
  box-sizing: border-box; /* 確保 padding 和 border 包含在寬度/高度內 */
}

.flexible-table .content-limited-row {
  line-height: 24px; /* 設定行高，影響內容在空間中的分布 */
  max-height: 72px; /* 設定最大高度，例如 3 倍的行高 */
  overflow-y: auto; /* 當內容超出時，出現垂直滾動條 */
}
</style>

<table class="flexible-table">
  <thead>
    <tr>
      <th>標題一</th>
      <th>標題二</th>
    </tr>
  </thead>
  <tbody>
    <tr class="content-limited-row">
      <td>這一列的內容，如果比較少，看起來就會比較寬鬆。</td>
      <td>但如果內容變多，它會盡量擠在 72px 的範圍內。如果超過了，就會出現滾動條。</td>
    </tr>
    <tr>
      <td>另一列，沒有特殊設定。</td>
      <td>會自動適應。</td>
    </tr>
  </tbody>
</table>

說明：

• `line-height: 24px;` 設定了每一行文字的高度。
• `max-height: 72px;` 則設定了整個列的最大高度。這裡的 `72px` 大約是 `24px` 的三倍，表示這列最多可以容納三行文字。
• `overflow-y: auto;` 是關鍵。當你輸入的內容超過 `max-height` 所能容納的範圍時，瀏覽器會在這個單元格（`

.my-table .fixed-row-height {
  height: 50px;
  vertical-align: middle; /* 讓內容在 50px 的高度內垂直置中 */
  overflow: hidden;
}