CSS中有关table cells间隔的设置

您所在的位置:网站首页 web设置表格 CSS中有关table cells间隔的设置

CSS中有关table cells间隔的设置

2023-09-18 09:09| 来源: 网络整理| 查看: 265

html中默认table里的单元格之间是有间距的,像这样:

要知道,我们可以对 table 元素设置margin,但不能设置padding(之前不可以,现在可以了?);可以对 td 元素设置padding,但不能设置margin;tr设置margin、padding属性都无效。

要想达到控制单元格间距的目的,可以通过以下手段:

1)CSS中有border-collapse属性,value可以为separate、collapse和inherit,可以用来控制单元格之间有无间距。

     当设置为“边框分离”模式时,可以通过border-spacing属性设置间距大小:

table{ border-collapse: separate; border-spacing: 10px 5px; /* 水平间距 垂直间距 */ }

   

    当设置为“边框合并”模式时,会忽略border-spacing属性和empty-cells(show/hide 是否显示表格中的空单元格)属性。

2)table自身有属性cellspacing、cellpadding,但html5不再支持了,所以建议用CSS border-collapse代替cellspacing,用td的margin代替cellpadding。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3