表格无边框,有内框,在table嵌套时,防止出现重复边线

时间:2023-03-08 21:53:06
表格无边框,有内框,在table嵌套时,防止出现重复边线
<html>
<head>
<title>test 表格无边框,有内框! ^^ CSDN 学习积累</title>
<style type="text/css">
#table {border:none;width:100%;}
#table td {border-bottom:1px solid #000;border-right:1px solid #000;}
#table td.two {border-right:none;}
#table td.thr {border-bottom:none;}
</style>
</head>
<body>
<table id="table" cellpadding="0" cellspacing="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="two">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="two">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="two">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="two">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="two">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="two">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="two">&nbsp;</td>
</tr>
<tr>
<td class="thr">&nbsp;</td>
<td class="thr">&nbsp;</td>
<td class="thr">&nbsp;</td>
<td class="thr">&nbsp;</td>
<td class="thr">&nbsp;</td>
<td class="thr">&nbsp;</td>
<td class="thr">&nbsp;</td>
<td class="two thr">&nbsp;</td>
</tr>
</table>
</body>
</html>

只要在每一行的最后一列加一个two,再在最后一行的所有列加上thr就行了,用法很简单