table边框的相关设置

今天写table的时候,发现table的边框无论怎么设置都显得很粗,然后就找了一种方法:

细线表格如果单纯设置边框,很难保证浏览器兼容。常见的做法是利用 CSS2 的 "border-collapse:collapse;" 属性合并表格边框;

border-collapse:collapse  如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

border-spacing:0;  规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。 如果定义一个 length 参数,那么定义的是水平和垂直间距。如果定义两个 length 参数,那么第一个设置水平间距,而第二个设置垂直间距。除非 border-collapse 被设置为 separate,否则将忽略这个属性。

border-left:1px solid black  border-top:1px solid black  这两个是设置table左上边框的,实线 1px。

border-right:1px solid black;border-bottom:1px solid black th和td的有边框和下边框的 

padding:5px 15px 上内边距和下内边距是 5px,左右内边距是15px

总的思想就是:消除所有两个边框之间的距离,然后在设置某一个边框就好。如果只是单纯的设置spacing为0并且设置border的话,那就是上下左右四个边框在一起就会显得比较粗,所以必须要设置border-collapse,(本人是这么理解的,我是菜鸟,大神轻点喷)

我自己理解然后写的css(border-collapse:collapse这个属性的官方定义是如果可能会合并成一个):

table{border-collapse:collapse; background:#efefef;}
th,td{border:1px solid black;padding:5px 15px;}
th{font-weight:bold;background:#78bdef;}

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值