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

时间：2021-05-08

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

.tab1
{
width: 300px;
height: 200px;
border: 1px solid #ccc;
border-collapse: collapse;
}
.tab1 td, .tab1 th
{
border: 1px solid #ccc;
padding: 5px;
}

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


第二种 （通过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>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章