2011/09/21

使用 CSS 把 HTML Table 及其 cell 的 border 都變成 1px

效果如下:

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


關鍵就是寫 CSS:

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

本來我想只要設定 th td 的 CSS 就好,但測試的時候發現各個 table cell 的 border 相互之間有少許距離的間距,於是再設定 table 的 CSS 讓 border 都塌陷。
(這裡 th td 的 border 顏色 #aaa 可以更換)

Try it yourself:
把這些 HTML 原始碼拿去複製另存 .htm 檔案在瀏覽器裡測試:

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

<style>
th, td {border:1px solid #aaa}
table {border-collapse:collapse}
</style>

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

沒有留言 :

張貼留言