🌐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 欄有右框線 colla...