🌐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...