<table border="100px" bordercolor="green">
<tr><td>ID</td><td>標題</td>...</tr>
</table>
現象:頁面僅顯示內容,無邊框線。
| 可能原因 | 說明 | 驗證方法 |
|---|---|---|
| CSS 重置/全局樣式覆蓋 | 項目引入的 reset.css、normalize.css 或框架樣式將 table, td { border: none; } | F12 開發者工具 → Elements → Computed 查看 border 屬性被劃掉 |
| DOCTYPE 缺失/錯誤 | 無 Doctype 觸發 Quirks 模式,屬性解析異常 | 頁面首行必須為 <!DOCTYPE html> |
| 屬性值格式錯誤 | border="100px" 非標準,應為 border="100" (像素單位隱含) | 修正為 border="1" 測試 |
| 瀏覽器渲染差異 | 舊版 IE 對 bordercolor 支持異常 | 換瀏覽器測試(Chrome/Firefox/Edge) |
| CSS 特異性衝突 | 內聯樣式 style="border:1px solid green" 優先級高於屬性 | 檢查是否有內聯/內部/外部 CSS 定義 table border |
<table style="border-collapse: collapse; width: 100%;">
<tr>
<th style="border: 1px solid green; padding: 8px;">ID</th>
<th style="border: 1px solid green; padding: 8px;">標題</th>
...
</tr>
<tr>
<td style="border: 1px solid green; padding: 8px;">1</td>
...
</tr>
</table>
或提取為 CSS 類:
<style>
.table-bordered { border-collapse: collapse; width: 100%; }
.table-bordered th, .table-bordered td { border: 1px solid green; padding: 8px; }
</style>
<table class="table-bordered">...</table>
border、bordercolor 屬性已棄用)<table> 元素HTML border 屬性已過時且易受 CSS 干擾。改用 CSS 定義邊框,並檢查全局樣式衝突,可徹底解決顯示異常。