您的位置：首页 > 其它

将table的border变细的三种方法

2012-08-08 16:20 113 查看
<!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=gb2312" />

<title>将table的border变细</title>

<style type="text/css">

table{ width:200px; height:100px; margin:20px 0px 0px 0px}

TD{ height:50px; text-align:center}

.table1 Td{ background-color:#FFFFFF; }

.table2{ border-collapse:collapse;}

.table3{ border-collapse: collapse; border:none;}

.table3 Td{ border: red solid 1px ;}

</style>

</head>

<body>

<!--table样板-->

<table class="Model" border="1" cellpadding="0" cellspacing="0" >

<tr>

<td>table样板</td>

<td>table样板 </td>

</tr>

<tr>

<td>table样板 </td>

<td>table样板 </td>

</tr>

</table>

<!--根据table的背景色和单元格之间的间隔以及table td的背景色来将table的border变细

注：td要设置heigth 否则交界线很粗-->

<table class="table1" border="0" cellpadding=re"0" cellspacing="1" bgcolor="red" >

<tr>

<td >边框变细1</td>

<td >边框变细1 </td>

</tr>

<tr>

<td >边框变细1</td>

<td >边框变细1 </td>

</tr>

</table>

<!--将table的border合并 注：边框不易设置颜色(很明显border出现了两种颜色)-->

<table class="table2" border="1" bordercolor="#FF0000" >

<tr>

<td >边框变细2</td>

<td >边框变细2</td>

</tr>

<tr>

<td >边框变细2</td>

<td >边框变细2</td>

</tr>

</table>

<!--设置td border的样式 前提（将table的border设置为none 以及border合并） -->

<table class="table3" >

<tr>

<td >边框变细3</td>

<td>边框变细3</td>

</tr>

<tr>

<td>边框变细3</td>

<td>边框变细3</td>

</tr>

</table>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航