table表格问题处理

1. table中tr间距的设定

table中tr间距的设定

问题提出：

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