css border-collapse设置表格单线边框和双线边框

时间:2016-07-18
css border-collapse属性用于控制表格table的边框是合并为单一的边框还是按照标准的HTML样式分开,本文章向大家介绍border-collapse属性的基本用法和实例,需要的朋友可以参考一下。

css border-collapse介绍

css border-collapse属性用于设置表格边框合并显示还是分开显示。

语法:

border-collapse : separate | collapse 

border-collapse的取值有两个:

  1. separate 边框会被分开,即显示两条线。
  2. collapse 合并显示为一条线。

默认值为separate。

css border-collapse实例

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>css border-collapse设置表格单线边框和双线边框</title>
<style>
h1{font-size:16px;font-family:Arial;}
.separate{border-collapse:separate;}
.collapse{border-collapse:collapse;}
</style>
</head>
<body>
<h1>separate: 双线边框</h1>
<table border="1" class="separate">
<tbody>
	<tr>
		<td>php</td>
		<td>mysql</td>
		<td>java</td>
	</tr>
	<tr>
		<td> http://www.manongjc.com/article/1211.html </td>
		<td>html</td>
		<td>css</td>
	</tr>
</tbody>
</table>

<h1>collapse: 单线边框</h1>
<table border="1" class="collapse">
<tbody>
	<tr>
		<td>php</td>
		<td>mysql</td>
		<td>java</td>
	</tr>
	<tr>
		<td>jsp</td>
		<td>html</td>
		<td>css</td>
	</tr>
</tbody>
</table>
</body>
</html>

在线运行

运行结果:

css border-collapse实例

css border-collapse扩展阅读

其实用另外一种方法也可以实现border-collapse:collapse的效果。给table上边和左边设上边框线,给td下边和右边设上边框线,然后将表格的border-spacing设置为0

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css border-collapse设置表格单线边框和双线边框 http://www.manongjc.com/article/1211.html</title>
<style type="text/css">
	.manongjc{border-top:1px solid #999;border-left:1px solid #999;border-spacing:0;}
	.manongjc td{border-bottom:1px solid #999;border-right:1px solid #999;padding:10px 30px;}
</style>
</head>

<body>
<table class="manongjc">
	<tr>
    	<td>码农教程</td>
        <td>php教程</td>
        <td>java教程</td>
    </tr>
    <tr>
    	<td>mysq教程</td>
        <td>sql教程</td>
        <td>html教程</td>
    </tr>
    <tr>
    	<td>css教程</td>
        <td>sql教程</td>
        <td>ant教程</td>
    </tr>
</table>
</body>
</html>

运行结果:

css border-collapse扩展阅读