如何使得中的单元格边界重合

来源:互联网 发布:机器人旋转矩阵 编辑:程序博客网 时间:2024/06/05 18:16

 html中<table>标签的单元格如果设置了边界,则相邻的单元格边界之间有间隔。

使用css的border-collapse 属性可以使得边界重合。

设置table的style="border-collapse:collapse;"

 

示例1 没有使用border-collapse

 

<html>

<head>

</head>

<body>

<table width="400px"  style="border-right: black 1px solid;  border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;">

<tr height="100px">

<td style="border-right: black 1px solid;  border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;">1</td>
<td style="border-right: black 1px solid;  border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;">2</td>

</tr>

</table>

</body>

</html>

 

示例2 使用了border-collapse

 

<html>

<head>

</head>

<body>

<table width="400px"  style=" BORDER-COLLAPSE: collapse; border-right: black 1px solid;  border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;">

<tr height="100px">

<td style="border-right: black 1px solid;  border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;">1</td>
<td style="border-right: black 1px solid;  border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;">2</td>

</tr>

</table>

</body>

</html>

原创粉丝点击