标签:
这个属性以前并没有怎么接触过,该属性有两种1取值:separate 和 collapse
取值的含义具体如下:
separate:边框独立
collapse:相邻边被合并
举例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border-collapse</title>
<style type="text/css">
.separate{
border-collapse: separate;
}
.collapse{
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table></br>
<table border="1">
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
</body>
</html>
最后效果:
另外表格元素table使用border-radius是不一样的,当表格样式属性border-collapse是collapse时,表格不能正常显示,只有border-collapse属性值为separate时,表格圆角才能正常显示,如将上例的css样式改成如下的时候:
<style type="text/css">
.separate{
border-collapse: separate;border-radius: 5px;
}
.collapse{
border-collapse: collapse;border-radius: 5px;
}
</style>
则显示的结果是:
参考地址:
http://www.css88.com/book/css/properties/table/border-collapse.htm
标签:
原文地址:http://my.oschina.net/sunshinewyf/blog/520488