表格細邊框的兩種CSS實現方法

Web開發者發表於2011-12-09
CSS

在網頁製作中，細邊框這個製作方法是必不可少的。這裡admin10000.com介紹2種常見的表格細邊框製作方法，均通過XHTML驗證。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>表格細邊框的兩種CSS實現方法</title>
        <style type="text/css">
                /* 利用表格樣式 border-collapse: collapse 實現細邊框 */
                .tab1
                {
                        width: 300px;
                        height: 200px;
                        border: 1px solid #ccc;
                        border-collapse: collapse;
                }
                .tab1 td, .tab1 th
                {
                        border: 1px solid #ccc;
                        padding: 5px;
                }
                /* 利用表格樣式 border-spacing:0px; 和表格與單元格背景色的不同來實現細邊框。
                 IE7及更早瀏覽器不支援border-spacing屬性，可以通過table的標籤屬性cellspacing來替代。*/
                .tab2
                {
                        width: 300px;
                        height: 200px;
                        background-color: #ccc;
                        border-spacing: 1px;
                }
                .tab2 td, .tab2 th
                {
                        background-color: #fff;
                }
        </style> 
</head> 
<body>
        第一種 （通過XHTML驗證）
        <table class="tab1">
                <thead>
                        <tr>
                                <th>
                                        表頭
                                </th>
                                <th>
                                        表頭
                                </th>
                        </tr>
                </thead>
                <tr>
                        <td>
                                Admin10000.com
                        </td>
                        <td>
                                Admin10000.com
                        </td>
                </tr>
                <tr>
                        <td>
                                Admin10000.com
                        </td>
                        <td>
                                Admin10000.com
                        </td>
                </tr>
        </table>
        <br />
        <br />
        第二種 （通過XHTML驗證）
        <table class="tab2">
                <thead>
                        <tr>
                                <th>
                                        表頭
                                </th>
                                <th>
                                        表頭
                                </th>
                        </tr>
                </thead>
                <tbody>
                        <tr>
                                <td>
                                        Admin10000.com
                                </td>
                                <td>
                                        Admin10000.com
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        Admin10000.com
                                </td>
                                <td>
                                        Admin10000.com
                                </td>
                        </tr>
                </tbody>
        </table> 
</body> 
</html>

相關文件：用CSS hack技術解決瀏覽器相容性問題

相關文章