当前位置：Gxlcms > css > 表格细边框的两种CSS实现方法

表格细边框的两种CSS实现方法

时间：2021-07-01 10:21:17 帮助过：16人阅读

在网页制作中，细边框这个制作方法是必不可少的。这里admin10000.com介绍2种常见的表格细边框制作方法，均通过XHTML验证。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>表格细边框的两种CSS实现方法</title>
  6.         <style type="text/css">
  7.                 /* 利用表格样式 border-collapse: collapse 实现细边框 */
  8.                 .tab1
  9.                 {
  10.                         width: 300px;
  11.                         height: 200px;
  12.                         border: 1px solid #ccc;
  13.                         border-collapse: collapse;
  14.                 }
  15.                 .tab1 td, .tab1 th
  16.                 {
  17.                         border: 1px solid #ccc;
  18.                         padding: 5px;
  19.                 }
  20.                 /* 利用表格样式 border-spacing:0px; 和表格与单元格背景色的不同来实现细边框。
  21.                  IE7及更早浏览器不支持border-spacing属性，可以通过table的标签属性cellspacing来替代。*/
  22.                 .tab2
  23.                 {
  24.                         width: 300px;
  25.                         height: 200px;
  26.                         background-color: #ccc;
  27.                         border-spacing: 1px;
  28.                 }
  29.                 .tab2 td, .tab2 th
  30.                 {
  31.                         background-color: #fff;
  32.                 }
  33.         </style> 
  34. </head> 
  35. <body>
  36.         第一种 （通过XHTML验证）
  37.         <table class="tab1">
  38.                 <thead>
  39.                         <tr>
  40.                                 <th>
  41.                                         表头
  42.                                 </th>
  43.                                 <th>
  44.                                         表头
  45.                                 </th>
  46.                         </tr>
  47.                 </thead>
  48.                 <tr>
  49.                         <td>
  50.                                 Admin10000.com
  51.                         </td>
  52.                         <td>
  53.                                 Admin10000.com
  54.                         </td>
  55.                 </tr>
  56.                 <tr>
  57.                         <td>
  58.                                 Admin10000.com
  59.                         </td>
  60.                         <td>
  61.                                 Admin10000.com
  62.                         </td>
  63.                 </tr>
  64.         </table>
  65.         <br />
  66.         <br />
  67.         第二种 （通过XHTML验证）
  68.         <table class="tab2">
  69.                 <thead>
  70.                         <tr>
  71.                                 <th>
  72.                                         表头
  73.                                 </th>
  74.                                 <th>
  75.                                         表头
  76.                                 </th>
  77.                         </tr>
  78.                 </thead>
  79.                 <tbody>
  80.                         <tr>
  81.                                 <td>
  82.                                         Admin10000.com
  83.                                 </td>
  84.                                 <td>
  85.                                         Admin10000.com
  86.                                 </td>
  87.                         </tr>
  88.                         <tr>
  89.                                 <td>
  90.                                         Admin10000.com
  91.                                 </td>
  92.                                 <td>
  93.                                         Admin10000.com
  94.                                 </td>
  95.                         </tr>
  96.                 </tbody>
  97.         </table> 
  98. </body> 
  99. </html>

相关文档：用CSS hack技术解决浏览器兼容性问题

以上就是表格细边框的两种CSS实现方法的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！