表格边框以虚线显示的css样式

html-css023

表格边框以虚线显示的css样式,第1张

表格边框默认是以实线进行显示的,怎么才能把它变成虚线呢?其实很简单只要简单加一些样式属性便可搞定,希望下面的例子对大家有所帮助

复制代码

代码如下:

<style>

.table5{text-align:center

border:1px

solid

#cccccc

border-radius

:3px

background-color:#FFFFFF

width:650px}

.table5

td{border-bottom:1px

dashed

#cccccc}

.table5

.last

td{border-bottom:0}

</style>

复制代码

代码如下:

<table

width="100%"

border="0"

cellpadding="2"

cellspacing="0"

class="table5">

<tr

>

<td

colspan="4"></td>

</tr>

<tr

>

<td

width="4%"><img

src="images/greendot.jpg"

width="4"

height="4"

/></td>

<td

width="17%"

class="text-fl">萍水相逢</td>

<td

width="63%"

align="center"

class="text-fl">消费10个金币,对换10元手机费</td>

<td

width="16%"

align="center"

valign="middle">2013.01.20</td>

</tr>

<tr

class="last">

<td

><img

src="images/greendot.jpg"

/></td>

<td

class="text-fl">M萍水相MM</td>

<td

align="center"

class="text-fl">消费500积分,对换500粉丝</td>

<td

align="center"

valign="middle">2013.01.20</td>

</tr>

<tr

>

<td

colspan="4"></td>

</tr>

</table>

在CSS 中常见的边框(border) 属性有以下几种:

border-style

border-width

border-color

border-top-, border-left-, border-bottom-, border-right-

border

border-style

border-style属性指定边框的样式。以下的表格列出这个属性可能有的值,以及每一个值显现出来的结果。

border-width

border-width属性是用来设定边框的宽度。可用的值为thin (薄)、medium (中等)、thick (厚),或是一个数字。

border-color

border-color属性是用来设定边宽的颜色。

border-top-, border-left-, border-bottom-, border-right-

我们可以将方向(top -上、bottom -下、left -左、right -右)和样式、宽度、及颜色合起来而成为一个属性。举例来说, border-top-style属性就是用来设定上边框的样式。以下举几个例子:

border

若四边的边框属性都一样,那我们可以用一个border属性来描述,而不必四个边都描述一次。另外,我们可以在同一行一次宣告边框样式、边框宽度、以及边框颜色。

p {

border:#0000FF 5px solid 

}

那以下的HTML,

<p>用一行来宣布所有边框的属性</p> 

会显现出

方法一:作一个1X2的图。半黑半白,再利用表格作成线。这种方法虽然麻烦,但在任何浏览器中均可浏览,兼容性最好。

方法二:在CSS里面设定。

在CSS面板里new一个style,选择“redefine HTML Tag”,再在下拉菜单里先“table”,在弹出的面板里,category里选择border,在border里,将top,left,right,bottom都设成1px,颜色设成你想要的边框的颜色。然后在style下拉框里选择dashed。一切ok。只是所有的表格都会用虚线做边框了。注意,这个效果在浏览器里才能看见。

方法三:直接在html里设置(如果你只想让某一个表格边框是虚线的话)。

在表格的html里加上这个:

style="BORDER-LEFT: #000000 1PX DASHEDBORDER-RIGHT: #000000 1PX DASHEDBORDER-TOP: #000000 1PX DASHEDBORDER-BOTTOM: #000000 1PX DASHED"

注:方法二、三,只能在IE5.5里用,到了NETSCAPE里一点用处都没有,除非你用做好的底图填充。