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

来源：凌优教育

在网页制作中，细边框这个制作方法是必不可少的。这里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实现方法