<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
/*background: url(images/bg.jpg) no-repeat;*/
padding: 0;
margin: 0;
width:1003px;
height:569px;
}
#apDiv {
position: absolute;
width: 715px;
height: 310px;
z-index: 2000;
left: 27px;
top: 217px;
}
</style>
<style type="text/css">
table {
border-collapse:collapse; /* 合并相邻边框 */
border: #cc0000 3px solid; /* 定义表格外边框 */
}
table td {
border: #cc0000 1px solid; /* 定义单元格边框 */
}
</style>
</head>
<body>
<div id="apDiv">
<table width="100%">
<tr>
<td>表格</td>
<td>描述</td>
</tr>
<tr>
<td>caption</td>
<td>定义表格标题</td>
</tr>
<tr>
<td>col</td>
<td>定义用于表格列的属性</td>
</tr>
<tr>
<td>colgroup</td>
<td>定义表格列的组</td>
</tr>
<tr>
<td>table</td>
<td>定义表格</td>
</tr>
<tr>
<td>tbody</td>
<td>定义表格的主体</td>
</tr>
<tr>
<td>td</td>
<td>定义表格单元</td>
</tr>
<tr>
<td>tfoot</td>
<td>定义表格的页脚</td>
</tr>
<tr>
<td height="20">th</td>
<td>定义表格页眉</td>
</tr>
<tr>
<td>thead</td>
<td>定义表格的页眉</td>
</tr>
<tr>
<td>tr</td>
<td>定义表格的行</td>
</tr>
</table>
</div>
</body>
</html>
以上代码效果如下图：
border-collapse:collapse; /* 合并相邻边框 */
A66BC527-8F2F-4FC4-9368-324ED7773145.png
去掉border-collapse:collapse;的效果如下图：85C82DAC-64B4-405D-A61B-7AD22C659C1E.png
ps:
10E42AB7-EE7A-456E-821A-A15C63BD6547.png
网友评论