本文介绍几种使HTML表格(Table)边框变得更细的方法，包括通过调整背景色和单元格间距、合并边框及直接设置单元格(TD)边框样式等。这些技巧有助于改善网页布局并提升用户体验。
<!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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
