首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計綜合問答

JSP Table Border 屬性無效的排查與解決

     編輯:程式設計綜合問答

問題代碼

<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

推薦解決方案:CSS 替代 HTML 屬性

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

優勢

  • 符合 HTML5 標準(border、bordercolor 屬性已棄用)
  • 樣式可復用、可維護、響應式友好
  • 避免全局 CSS 衝突(類名隔離)
  • 支持更豐富效果(圓角、陰影、懸停變色)

快速排查步驟

  1. F12 選中 <table> 元素
  2. 查看 Computed → border-top/left/right/bottom 是否有值
  3. 若被劃掉,點擊展開查看來源 CSS 文件/行號
  4. 修改或覆蓋對應 CSS 規則

總結

HTML border 屬性已過時且易受 CSS 干擾。改用 CSS 定義邊框,並檢查全局樣式衝突,可徹底解決顯示異常。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved