HTML控制表格边线显示。

前言：

如果我们想让一个表格有黑色的边线，很容易实现。

使用以下代码即可。

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;