🌐Vue 表格框線消失怎麼辦？從零了解 sticky 欄位、border-collapse 與表格樣式修正教學

Vue 表格框線突然消失？其實很多時候不是資料問題，而是 CSS 的顯示邏輯

在做企業系統、報表系統、供應鏈系統、ERP 或內部管理平台時，前端很常會碰到一種狀況：

明明表格資料正常，欄位也都有顯示，
但使用者一看畫面就說：

「怎麼有些格線不見了？」
「表頭看起來像沒切開」
「某幾欄黏住後，框線變得怪怪的」
「滾動時右邊線條像被吃掉」

這種問題尤其容易發生在：

表格欄位很多
有固定表頭
有固定左側欄位
有水平捲動
有篩選按鈕
有 sticky 欄位
有交錯底色

也就是說，只要你的 Vue 頁面是一張「比較複雜的商業表格」，幾乎都可能遇到。

這篇文章我會用完全沒有前端基礎的人也能理解的方式，一步一步解釋：

為什麼表格框線會消失
border-collapse 到底是什麼
為什麼 sticky 欄位會讓線條看起來怪怪的
該怎麼修改 CSS 才能穩定顯示框線
提供一份可直接套用的示意程式碼

一、先理解問題：你看到的「框線消失」，不一定是真的消失

很多人第一時間會以為：

是資料少了
是欄位沒對齊
是瀏覽器壞掉
是 Vue render 出問題
是 API 回傳資料怪怪的

但實際上，大多數這類問題都不是資料層，而是CSS 視覺層。

也就是：

線其實存在，但因為邊框合併、顏色太淡、sticky 疊層、背景覆蓋，導致肉眼看起來像消失。

這就是前端最麻煩的地方之一。
資料沒錯，DOM 也沒錯，畫面卻看起來像壞掉。

二、最常見元兇：`border-collapse: collapse`

HTML 表格有一個非常常見的 CSS 屬性：


table {
  border-collapse: collapse;
}

很多人平常都會這樣寫，因為它很常見，也很方便。

但要知道，這行的意思是：

相鄰儲存格的邊框會合併成一條線。

乍看之下很合理，但當你的表格開始變複雜時，就可能出現問題。

例如：

A 欄有左框線
B 欄有右框線
collapse 之後，兩條線會合成一條
如果顏色很淡，或者上面又疊 sticky 元素
最後就會看起來像沒線

對一般靜態表格來說，這可能沒差。
但對有固定欄位與捲動效果的表格來說，就很容易出現「某些框線忽有忽無」。

三、為什麼 sticky 欄位會讓問題更明顯？

如果你有做這種效果：

表頭固定在最上面
左邊幾欄固定不動
右邊欄位可以水平滑動

通常會用到：


position: sticky;
left: 0;
top: 0;

這本身沒有問題。
問題出在 sticky 元素會脫離一般的視覺流，開始參與「疊層」。

此時如果你的表格又同時有：

合併邊框
淺色線條
不同背景色
z-index 疊層
box-shadow 模擬分隔線

就很容易變成：

線被背景蓋掉
線和隔壁格線重疊
sticky 的 cell 覆蓋了原本的邊框
表頭與內容列的線不連續
某幾欄看起來像沒有框線

所以你看到的不是「真的沒有畫」，而是「畫了但視覺上不明顯」。

四、最穩定的修法：把表格改成 `separate`

如果你的表格是複雜型報表，我通常會建議：

不要讓所有 cell 邊框互相合併，改成各自獨立。

做法就是把：


border-collapse: collapse;

改成：


border-collapse: separate;
border-spacing: 0;

這樣的好處是：

每個儲存格都有自己的邊框
不會互相搶線
sticky 時較穩定
視覺上比較容易控制
配合深一點的邊框色，框線會很清楚

其中 border-spacing: 0; 很重要，
因為如果只改 separate，儲存格之間可能會出現縫隙。

五、第二個關鍵：邊框顏色不要太淡

很多專案會寫：


border: 1px solid #ddd;

這在白底畫面通常還可以。
但如果你的表頭是黃色、藍色、灰藍色，或者有交錯列背景時，#ddd 很容易太淡。

尤其在：

高解析螢幕
公司內網舊瀏覽器
使用者螢幕亮度偏低
顏色層次很多的畫面

它就會讓框線變得很不清楚。

比較穩的做法是：

表頭：用稍深一點的灰
內容：用中灰或淺灰
固定欄位：必要時加右側陰影或右框線強化分隔

例如：


border: 1px solid #666;

或：


border: 1px solid #bfc7d1;

比 #ddd 更容易被看見。

六、給完全新手的理解方式：表格像磁磚，collapse 像把磁磚縫壓成一條

如果你不熟 CSS，我用生活化方式講：

每個 <td>、<th> 就像一塊磁磚
邊框就是磁磚之間的縫
collapse 就像把兩塊磁磚共用一條縫
separate 就像每塊磁磚自己有完整邊界

當你再加入 sticky，就像把某些磁磚浮起來疊在別的磁磚上面。
如果本來就只剩一條很淡的共用縫，那一被蓋住，看起來就像整條線消失。

所以為了讓畫面穩定，最直接的方式就是：

邊界不要共用
線色不要太淡
sticky 欄位額外補強分隔效果

七、推薦的修正策略

如果你遇到 Vue 表格框線異常，我會建議依照下面順序檢查。

1. 先改表格模式

把表格從合併邊框改成獨立邊框。

2. 把表頭和資料格的 border 顏色加深

不要使用太接近背景色的灰。

3. sticky 欄位加背景色

否則滑動時底下的內容會透出來，看起來像線亂掉。

4. sticky 最後一欄補一條右側分隔效果

可以用 border-right 或 box-shadow。

5. 檢查 z-index

如果表頭和內容列的 sticky 疊層沒分好，也會讓線看起來斷掉。

八、教學用示意版本：如何修正表格框線消失

下面這份程式碼是教學示意版，不是原始專案內容，已改寫成通用型範例。

Vue Template 範例


<template>
  <div class="report-page">
    <div class="table-wrapper">
      <table class="data-grid">
        <thead>
          <tr>
            <th v-for="column in columns" :key="column.key">
              {{ column.label }}
            </th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="item in rows" :key="item.id">
            <td v-for="column in columns" :key="column.key">
              {{ item[column.key] }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

Script 範例


<script setup>
import { ref } from 'vue'

const columns = ref([
  { key: 'orderNo', label: '訂單編號' },
  { key: 'customer', label: '客戶名稱' },
  { key: 'plant', label: '廠別' },
  { key: 'qty', label: '數量' },
  { key: 'date', label: '需求日期' }
])

const rows = ref([
  { id: 1, orderNo: 'A001', customer: 'Client A', plant: 'T1', qty: 200, date: '2025-04-01' },
  { id: 2, orderNo: 'A002', customer: 'Client B', plant: 'T2', qty: 350, date: '2025-04-02' },
  { id: 3, orderNo: 'A003', customer: 'Client C', plant: 'T3', qty: 180, date: '2025-04-03' }
])
</script>

CSS 修正版範例


<style scoped>
.report-page {
  padding: 20px;
  background: #f7f9fc;
}

.table-wrapper {
  overflow-x: auto;
  border: 1px solid #aeb8c2;
  background: #fff;
}

.data-grid {
  width: 100%;
  min-width: 1200px;

  /* 關鍵修正 */
  border-collapse: separate;
  border-spacing: 0;
}

.data-grid thead th {
  background: #f5c400;
  color: #1f2d3d;
  font-weight: 700;
  text-align: center;
  padding: 12px 10px;
  white-space: nowrap;

  /* 邊框加深 */
  border-right: 1px solid #7f8c99;
  border-bottom: 1px solid #7f8c99;
  border-top: 1px solid #7f8c99;
}

.data-grid thead th:first-child {
  border-left: 1px solid #7f8c99;
}

.data-grid tbody td {
  text-align: center;
  padding: 10px 8px;
  white-space: nowrap;
  border-right: 1px solid #c3ccd5;
  border-bottom: 1px solid #c3ccd5;
}

.data-grid tbody td:first-child {
  border-left: 1px solid #c3ccd5;
}

.data-grid tbody tr:nth-child(odd) td {
  background: #eef6fb;
}

.data-grid tbody tr:nth-child(even) td {
  background: #ffffff;
}
</style>

九、如果還有固定欄位，該怎麼寫？

如果你的左邊前幾欄要固定，建議這樣處理：

sticky 欄位一定要有背景色
sticky 欄位要有比一般欄位更高的 z-index
最後一個固定欄位要額外補強右分隔線

示意寫法如下：


.fixed-col {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #ffffff;
}

.fixed-col-header {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 5;
  background: #f5c400;
}

.fixed-col-last {
  box-shadow: 2px 0 0 #6f7c88;
}

這裡的 box-shadow 很常拿來做「固定欄位與可捲動欄位的分界線」，
因為有時候單純靠 border 還不夠明顯。

十、為什麼很多人改了還是沒效果？

這也是前端常見陷阱。
你明明改了 CSS，結果畫面還是怪怪的，通常有幾個原因。

1. 你只改了 `th`，沒改 `td`

表頭有線，內容沒線，看起來還是怪。

2. sticky 欄位背景沒補

導致下方內容透過來，像邊框破掉。

3. `border-collapse` 還是 `collapse`

即使你邊框顏色加深，還是可能被合併。

4. `z-index` 疊層不正確

表頭可能壓過內容，或內容壓過表頭。

5. 你用了 scoped style，但 class 沒套到正確元素

CSS 有寫，實際沒有命中。

十一、企業專案裡最實用的心法：先求穩定，再求漂亮

很多前端畫面會追求：

線要很淡
介面要很輕
視覺要乾淨
邊框越少越高級

但在報表系統、內部平台、供應鏈系統裡，最重要的往往不是「漂亮」，而是：

使用者看得清楚
欄位切分明確
滾動時不錯位
固定欄位不混亂
匯報時畫面不會讓人誤會

所以實務上，表格線條比設計稿稍微明顯一點，通常反而是比較好的做法。

十二、簡單結論：Vue 表格框線消失，優先檢查這三件事

如果你只想先快速排除問題，請先看這三點：

第一：把表格改成這樣


border-collapse: separate;
border-spacing: 0;

第二：加深 `th`、`td` 的邊框顏色

不要只用超淡灰。

第三：sticky 欄位補背景與右側分隔

否則滑動後會很容易看起來像斷線。

十三、適合初學者記住的一句話

複雜表格一旦用了 sticky，就不要太依賴 collapse 合併邊框；獨立邊框通常更穩。

這句話在做 Vue 報表頁面時非常實用。

十四、文章摘要

這次的問題表面上是「表格有些框線消失」，
但真正原因通常是 CSS 顯示機制造成的，尤其是：

border-collapse: collapse
邊框顏色太淡
sticky 欄位覆蓋
z-index 疊層
背景色與分隔效果不足

最常見也最有效的解法，就是把表格改成：

border-collapse: separate
border-spacing: 0
強化 th、td 邊框
sticky 欄位補背景與分隔線

這樣不但能修正「框線消失」，也能讓整張表格在大量資料與水平捲動時更穩定。

如果你最近也剛好遇到以下問題：

Vue 表格框線不見
sticky 欄位邊框異常
表格滑動後格線錯亂
表頭與內容列分隔不清
Vue 報表頁面樣式跑掉

那麼先從這篇提到的 border-collapse 與 sticky 顯示邏輯開始檢查，通常就能很快找到原因。

前端表格問題看起來像小事，但只要用在企業系統裡，往往會直接影響使用者判讀資料的效率。
把框線、固定欄位、捲動行為一次整理好，整個畫面的專業度就會差很多。

搜尋此網誌

小小大大學