2011/09/21

利用 HTML Table 及其 th td 的背景顏色差異偽裝成 HTML Table 的 border

效果如下:

 一四七  二五八  三六九 
 One   Two   Three 
 Four   Five   Six 
 Seven   Eight   Nine 


這裡 HTML Table 及其 cell 的背景色偽裝 border 預設 2px。想要該 border 變 1px 就給 table 用 CSS border-spacing:1px。效果如下:

 一四七  二五八  三六九 
 One   Two   Three 
 Four   Five   Six 
 Seven   Eight   Nine 


原理:table 的背景色同時也是 border 的背景色。td 的背景色與 table 的背景色不同(根據個人需要選擇是否指定 th 的背景色),這樣 td 的背景色就會把 table 的背景色擋掉,然後各個 td 的 cell 之間的空隙就會有 table 的背景色透過來看起來就像是各個 cell 之間的 border。那它其實不是 border 是 table 的背景顏色。

關鍵就是寫 CSS 給 table 和 th/td 指定不一樣的背景顏色:

td {background:#004080}
table {background:black}

(我沒有在 CSS 裡寫 th,如果你有需要就「th, td」把 th 也寫上)

Try it yourself:
把這些 HTML 原始碼拿去複製另存 .htm 檔案在瀏覽器裡測試:
(如果想要預設 2px 的 table cell 間距,就刪除紅字 border-spacing:1px)

<?xml version="1.0" encoding="big5">

<style>
td {background:#004080}
table {background:black;border-spacing:1px}
</style>

<table style=color:white>
<tr><th> 一四七 <th> 二五八 <th> 三六九 </tr>
<tr><td> One <td> Two <td> Three </tr>
<tr><td> Four <td> Five <td> Six </tr>
<tr><td> Seven <td> Eight <td> Nine </tr>
</table>



順便說一下:使用 CSS 把 HTML Table 及其 cell 的 border 都變成 1px 所用的那個 CSS

th, td {border:1px solid #aaa}
table {border-collapse:collapse}


用本文介紹的方法寫就是

th, td {background:white}
table {background:#aaa;border-spacing:1px}


並且網頁的顯示效果在我的 Firefox 3.6 裡一模一樣。但是用本文介紹的方法來達成 table 全 border 1px 並非正統做法。

沒有留言 :

張貼留言