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

最後更新：2017-04-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在網頁製作中，細邊框這個製作方法是必不可少的。這裡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技術解決瀏覽器安全色性問題

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More