用CSS设置Table的细边框的几种方法(2009

html-css017

用CSS设置Table的细边框的几种方法(2009,第1张

设置Table的细边框通常有这么几种方式:

1、设置边框的BORDER=0

、cellspacing=1,设置Table的背景色为所要的边框色,再设置所有的td背景色为白色,这样细边框就显露出来了。这个方法有些邪气,看似不太正宗,但是也能达到效果,条条大路通罗马嘛!

再来看看第二种方法:

2、设置BORDER=0

,再通过CSS,给Table加上1px的border-top,border-left,然后再设置所有的td的border-right,border-bottom,这样也能达到所要的效果。可见CSS很是强大啊。

下面介绍一种更为简便有效的方法:

3、设置table的CSS为{border-collapse:collapseborder:none},再设置td的CSS为{border:solid #000 1px},大功告成!而且Word也能认出这种设置。

1.所有的<table>均为细边框。

table,table td,table th{border:1px solid #ff0000border-collapse:collapse}

2.指定的<table>为细边框,把<table>放在<div>中,用ID作索引,如下:

#mdA table,#mdA table td,#mdA table th{border:1px solid #ff0000border-collapse:collapse}

<div id="mdA">

<table width="400" border="0" cellspacing="0" cellpadding="0">

<tr>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

</table>

</div>

可以通过设置单元格元素td的边框样式来实现:

border: width style color  /*分别设置边框的粗细、样式和颜色*/

示例如下:

在HTML代码中给出两个表格

<table class="tb1">

<tr><td>有</td><td>志</td><td>者</td></tr>

<tr><td>事</td><td>竟</td><td>成</td></tr>

</table>

<table class="tb2">

<tr><td>苦</td><td>心</td><td>人</td></tr>

<tr><td>天</td><td>不</td><td>负</td></tr>

</table>

分别设置不同的样式

table{ /* 表格整体样式 */

margin:50px  /* 外边距50px */

border-collapse:collapse /* 合并为单一的边框线 */

}

/* 设置tb1类的表格样式 */

table.tb1 td{padding:10pxborder:1px solid green}

/* 设置tb2类的表格样式 */

table.tb2 td{padding:20pxborder:5px dashed blue}

最终效果如下