怎么用CSS设置html中的表格边框样式

html-css019

怎么用CSS设置html中的表格边框样式,第1张

表格的边框分为3个元素决定:table,th,td

如果三种元素全部设置了border样式,那么会发现外层有2层border,里面的th与th,td与td,td与th之间的border也是有2层的,所以,在设置border之前最好先想好通过什么样的规则来展现boeder(因为方式很多,那么我们只能选择适合自己的-也就是用的习惯的)。另外,表格之间还有一个概念是表空间,可以通过给表格设置样式table{ border-collapse:collapse border-spacing:0}清除这些多余的空间,那么有了上面的准备工作之后,下面就开始border样式的设置--代码如下:

td,th{border-bottom: 1px solid #e3e3e3//xia下边框border-right:1px solid #e3e3e3//有边框}

那么你可以得到效果:

少了左边和上边,接下来就可以根据浏览器的兼容性选择分支:

直接table{border-top: 1px solid #e3e3e3border-left: 1px solid #e3e3e3

}

简单粗暴

2.

td:first-child,th:first-child{border-left: 1px solid #e3e3e3}

th{border-top: 1px solid #e3e3e3}

这个方法有兼容性问题,因为涉及到伪类的:first-child,所以IE7是无效的。

于是效果就如下了:

用CSS控制的,下面是一段例子,照着例子的参数把你的表格改了吧。

<table cellpadding="0" cellspacing="0" border="0" style="broder-collapse:collapse">

    <tr>

        <td style="width:150px height:40px border:1px solid #CCC"></td>

        <td style="width:150px height:40px border:1px solid #CCC"></td>

        <td style="width:150px height:40px border:1px solid #CCC"></td>

    </tr>

    <tr>

        <td style="width:150px height:40px border:1px solid #CCC"></td>

        <td style="width:150px height:40px border:1px solid #CCC"></td>

        <td style="width:150px height:40px border:1px solid #CCC"></td>

    </tr>

</table>

在CSS里面设置,自己调试一下就可以了!

border:1px solid #333

border-top:1px solid #333

border-right:1px solid #333

border-bottom:1px solid #333

border-left:1px solid #333