CSS表格样式总结篇

CSS表格样式总结篇

一、背景

表格的背景样式同样可以使用background属性来进行设置。

示例如下:

为table标签添加背景时,如果要使用模糊效果,那么可以使用CSS3的opacity属性,但是使用opacity属性的同时将字体模糊掉,所以需要用另外一种方法。
首先添加父节点的背景“background-image: url(https://augustwuli.github.io/test/img/mafumafu.jpg);”,然后在table标签里添加“background: rgba(255,255,255,0.6);”来实现背景模糊,而低版本的IE不支持rgba形式的三色加透明度的颜色设置方式,所以父节点需要使用“filter: alpha(opacity=40);”来设置模糊效果。且利用IE的bug错误,我们使用“position:relative;”来取消对滤镜属性的效果。

二、边框

对于表格,可以通过HTML提供table的属性border、frame和rules来进行边框的设置,另外还可以通过CSS提供的border来进行边框的设置。如果同时设置HTML所提供的边框属性以及CSS提供的边框属性,可能会产生冲突,建议只是用CSS来进行边框样式设置。

示例如下:

三、边距

可以通过HTML提供的table属性cellspacing来进行边距的设置,另外还可以通过CSS提供的padding和margin属性来进行边距的设置。

示例代码:

四、表格嵌套

表格标签可以互相嵌套,这样可以使得样式更加丰富。

示例代码:

五、跨行、列表格项

为了实现一个表格项跨越多行或者多列的样式, 可以使用HTML提供的colspan属性以及rowspan属性来进行跨行、列表格的设置。

示例代码:

六、表格倾斜角

示例代码:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复