表格边框默认是以实线进行显示的,怎么才能把它变成虚线呢?其实很简单只要简单加一些样式属性便可搞定,希望下面的例子对大家有所帮助
创新互联建站是一家专业提供六合企业网站建设,专注与成都网站设计、成都网站制作、H5响应式网站、小程序制作等业务。10年已为六合众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。
复制代码
代码如下:
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
已知的方式有2种(纯样式):
1.用标签(div、span这些标签都可以)的边框线设置虚线来实现,比如在需要的位置插入div然后设置border-top(或者border-bottom):1px dashed #e5e5e5;(3个属性分别表示:1像素的边宽 虚线 颜色);
2.用hr,不过因为实现方式和方式一一样,比如:hr style="height:1px;border:none;border-top:1px dashed #e5e5e5;" /,但是这个标签在H5种已经被淘汰了,完全可以靠第一种来实现。第二种就当做是知识扩展
css有两种虚线形式,一种是dashed,一种是dotted;如:
div style="width:100px;height:100px;border:1px dashed red"/div
div style="width:100px;height:100px;border:1px dotted red"/div
效果图如下:
在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
会显现出
在css里可以设置边框,你可以只要上边框或者下边框,你可以设置只要上下不要左右,这样就不会有重叠了!
style type="text/css"
!--
.dashed_tbl {
border-top: 1px dashed #333333;
border-left: 1px dashed #333333;
}
.dashed_tbl td{
border-bottom:1px dashed #333333;
border-right:1px dashed #333333;
padding:3px 10px;
}
--
/style
table cellpadding="0" cellspacing="0" class="dashed_tbl"
tr
td123/td
td234/td
td345/td
/tr
tr
td123/td
td234/td
td345/td
/tr
tr
td123/td
td234/td
td345/td
/tr
/table
是不是这样的?