zoukankan      html  css  js  c++  java
  • 表格细边框的两种CSS实现方法

    在网页制作中,细边框这个制作方法是必不可少的。这里介绍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
                    {
                             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
                    {
                             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> 
  • 相关阅读:
    PTA 乙级 1041 考试座位号 (15分) C++
    markdown test
    PTA 乙级 1040 有几个PAT (25分) C/C++
    PTA 乙级 1039 到底买不买 (20分) Python
    升级DLL plugin 到AutoDllPlugin
    使用插件适配移动端布局
    关于webpack,你想知道的都在这;
    HTML2Canvas使用总结
    ajax自己封装
    linux 基础知识练习之一---安装与连接
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/3586750.html
Copyright © 2011-2022 走看看