使用CSS格式化Table样式

在网页里使用table的时候，样式一般比较难管理，因为table的有些样式与其它控件不太一样

1、table的分外边框，tr边框，td边框，它们之间都是有间距的

2、你可以指定它们之间的间距为0，但当你设置边框时，会发现边框是2px宽的，因为在table里，tr、td等元素是相邻的

所以想做一个好看的table样式可以参考以下的步骤：

1、table设置

 border-collapse:collapse; /*设置间距为0*/
 border: 1px solid #808080; /*设置table的最外层边框*/

2、tr设置

 /*设置tr的上边与下边样式*/

 border-top-width: 1px;
 border-bottom-width: 1px;
 border-top-style: solid;
 border-bottom-style: solid;
 border-top-color: #808080;
 border-bottom-color: #808080;

3、th,td设置

 /*设置th,td的左边与右边样式*/

 border-right-width: 1px;
 border-left-width: 1px;
 border-right-style: solid;
 border-left-style: solid;
 border-right-color: #808080;
 border-left-color: #808080;
4、.NoBorder类设置

/*设置不显示边框的样式*/

.NoBorder {
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
}

通过前3项就可以显示一个全边框的table，

如果你想去掉某行或某列的边框，将tr或td的class设置成.NoBorder就可以了

如果你想去掉table最外面的边框，将table的class设置成.NoBorder就可以了

非常方便，当然我这个方法不能解决所有设计需求，但它是目前比较规整、方便的方法，代码量也比较小，逻辑也简单

大家可以在这个基础上进一步扩展做出更多样的table