MyException - 我的异常网
当前位置:我的异常网» Web前端 » table表格有关问题处理

table表格有关问题处理

www.MyException.Cn  网友分享于:2018-06-06  浏览:0次
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.csdn.net/leys123/article/details/46415629

https://blog.csdn.net/itmyhome1990/article/details/50475616

 

2. table表格中colspan不起作用的问题

 

今天碰到一个colspan不起作用的问题

最终查找到是因为父元素tr设置了display:block原因造成的,在做tr显示与隐藏是,最好用none和“”来切换,不要用block

 

https://blog.csdn.net/qq_26006367/article/details/49446305

 

 

 

 

文章评论

软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有