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

ttx9n · 发表于 2014-3-10 17:51:10

细边框这个制作方法是必不可少的，使用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
{
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>

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

e5plu · 发表于 2022-8-29 08:39:43

哟哟哟哟哟以偶

mkonji · 发表于 2023-3-11 03:23:06

数据库了多久撒快乐的健身卡啦

gyalp · 发表于 2023-6-25 23:42:35

还有人在不。。。。。。。。。。啊

黑白键 · 发表于 2023-10-21 01:14:22

而快乐你们快乐马年快乐

6hruhg · 发表于 2023-11-18 08:24:53

天天源码社区。。。。

zzhxxx · 发表于 2024-3-18 15:17:36

看到这帖子真是高兴！

kwzc65wdj · 发表于 2024-5-6 11:18:30

哈哈哈哈哈哈哈

xf9hlg1 · 发表于 2024-7-30 00:35:40

还有人在不。。。。。。。。。。啊

uj9lpc · 发表于 2024-8-11 19:35:08

收下来看看怎么样

账号		自动登录	找回密码
密码			立即注册

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

相关帖子