问题提出:
table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐);
并且在tr中对起设定padding是有用的,可以增加内边距,但是设定margin是没有用的,tr的外间距依然是0;
解决方案:
css的两个属性:border-collapse:collapse / separate & border-spacing:10px 10px;
需要用border-collapse & border-spacing联合控制tr的间距;
如:
<table style="border-collapse:separate; border-spacing:10px;">
<tr></tr>
</table>
CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框
值 | 描述 |
separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 |
collapse | 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
inherit | 规定应该从父元素继承 border-collapse 属性的值。 |
border-collapse属性加上border-spacing属性就可以设置tr行间距
<table style="border-collapse:separate; border-spacing:0px 10px;">
<tr>
<td>那片笑声躺我想起我的那些花儿</td>
</tr>
<tr>
<td>在我生命每个角落静静为我开着</td>
</tr>
</table>
https://blog.youkuaiyun.com/leys123/article/details/46415629
https://blog.youkuaiyun.com/itmyhome1990/article/details/50475616
2. table表格中colspan不起作用的问题
今天碰到一个colspan不起作用的问题
最终查找到是因为父元素tr设置了display:block原因造成的,在做tr显示与隐藏是,最好用none和“”来切换,不要用block
https://blog.youkuaiyun.com/qq_26006367/article/details/49446305