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> 
  • 相关阅读:
    npm 版本不支持node.js的解决方法
    kolla-ansible运维
    Openstack Train部署 (kolla-ansible)
    存储使用的光纤交换机
    Openstack Train部署 (openstack-ansible)
    使用cockpit-ceph-deploy部署ceph集群
    ceph集群维护
    ceph生产环境规划
    分布式存储ceph部署
    openvswitch网桥的连接方式
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/3586750.html
Copyright © 2011-2022 走看看