首頁 > web前端 > css教學 > 表格細邊框的兩種CSS實作方法

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

巴扎黑
發布: 2017-04-05 09:46:17
原創
1062 人瀏覽過

在網頁製作中,細邊框這個製作方法是不可或缺的。這裡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技術解決瀏覽器相容性問題

以上是表格細邊框的兩種CSS實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板