table的一些小知识点

• table常见问题

    

    

       
td1
      
td2
    
   

image.png

一些小的注意的点
1 table默认显示 display:table; 设置padding无效（一般不会有人对table进行padding操作）。
2 tr默认显示 display：table-row 设置margin padding统统无效 。设置border时需要将table的table-collapse属性设置为collapse。
3 td默认为 dispaly:table-cell margin无效 而且如果对元素设置absolute 或者设置float则会导致其功能失效。

• table-cell的无敌功能

1. 实现两栏等高

image.png

    
    
    


addLeft
addRight

    

    

此外还有设置margin paddding的实现方式
纯CSS分栏高度一致处理
如果table-cell的父元素不是table-row的话 浏览器会创建出一个默认的table-cell 但是个人建议还是自己手写比较好

2. table-cell的左栏固定右边自适应

原理很简单 就是简单的利用table-cell属性 便不进行赘述了
其他的实现方法请看
关于固定与自适应
个人认为 虽然table布局已经退出了人们的视线 但是不得不说 table-cell这个属性还是很有用的。