前言:
如果我们想让一个表格有黑色的边线,很容易实现。
使用以下代码即可。
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
但是这样的表格我们是无法任意空中边线的显示的。
比如我们想让表格的右上角不显示。
这时,我们就要一点一点画出表格的边线;
用td的边线组成整个表的边线,然后控制td边线的显示。
<style>
.myTable { border-collapse:collapse; border-spacing:0; width:900px; text-align:center; margin-left:30px; }
.myTable td { border-top:1px solid #000000; border-left:1px solid #000000; border-bottom:1px solid #000000; border-right:1px solid #000000; padding:3px;}
.myTable td.hiddenLeftSide {border-right:1px solid #FFFFFF;}
.myTable td.hiddenTopSide {border-top:1px solid #FFFFFF;}
</style>
<table class="myTable">
<tr>
<td>表格边线控制</td>
<td>border-top:1px solid #000000</td>
<td class="hiddenLeftSide hiddenTopSide">表格边线控制</td>
</tr>
<tr>
<td>表格边线控制</td>
<td>表格边线控制</td>
<td>表格边线控制</td>
</tr>
<tr>
<td width="300px">border-left:1px solid #000000; </td>
<td width="300px">合并border-collapse:collapse;单元格 </td>
<td width="300px">border-right:1px solid #000000;</td>
</tr>
<tr>
<td>表格边线控制</td>
<td>表格边线控制</td>
<td>表格边线控制</td>
</tr>
<tr>
<td>表格边线控制</td>
<td>border-bottom:1px solid #000000; </td>
<td>表格边线控制</td>
</tr>
</table>
使用以上方法即可实现。
注意:
把右上角的单元格画成白线时,只有按以下这么写才行;
.myTable td.hiddenLeftSide
如果单独写为下面这种形式在td中使用是没有效果的!
hiddenLeftSide
学习总结:
这里面我们了解了表格边线控制的4个属性;border-top:1px solid #000000; border-top:1px solid #000000;
border-top:1px solid #000000; border-left:1px solid #000000;
border-top:1px solid #000000; border-bottom:1px solid #000000;
border-top:1px solid #000000; border-right:1px solid #000000;
还有【设置表格的边框是否被合并为一个单一的边框】这一属性。
border-collapse:collapse;