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

    <!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> 
    

      本文转载自:http://www.admin10000.com/document/7.html

  • 相关阅读:
    webapi帮助文档swagger
    后台任务hangfire
    EF6 DbModelBuilder
    .net跨平台分析软件
    EF迁移命令
    NuGet Package Explorer
    ghost blog 中文资料
    IDependency自动注册autofac
    Abp zero 示例运行
    AutoMapperExtension
  • 原文地址:https://www.cnblogs.com/zhaiajing1985/p/3067401.html
Copyright © 2011-2022 走看看