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

 我来答
回忆随风渐远家
2017-03-26 · 超过86用户采纳过TA的回答
知道答主
回答量:171
采纳率:0%
帮助的人:65.9万
展开全部

表格的边框分为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;//有边框
}
那么你可以得到效果:

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


  1. 直接table{
    border-top: 1px solid #e3e3e3;
    border-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是无效的。
于是效果就如下了:

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式