-
table常见问题
<table style=" border-collapse: collapse;">
<tbody>
<tr style="height: 70px;border: 1px solid blue;">
<td style="background: rosybrown;padding: 10px;">td1</td>
<td style="background: yellow;">td2</td>
</tr>
</tbody>
</table>
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的无敌功能
-
实现两栏等高
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>帅气的zf</title>
<style>
#test{display: table-row;}
#left{width:200px; background:coral;display: table-cell;vertical-align: top;}
#right{width: 200px; background:royalblue;display: table-cell;vertical-align: top;}
</style>
</head>
<body>
<button onclick="addLeft()">addLeft</button>
<button onclick="addRight()">addRight</button>
<div id="test">
<div id="left"></div>
<div id="right"></div>
</div>
<script>
function addLeft(){
var img = document.createElement('img');
img.src = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=303034169,1588595531&fm=26&gp=0.jpg";
img.style.width = 100+"px";
img.style.display ="block";
img.style.padding = 50+"px";
document.getElementById('left').appendChild(img);
}
function addRight() {
var img = document.createElement('img');
img.src = "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2585481751,3170342118&fm=26&gp=0.jpg";
img.style.width = 100+"px";
img.style.display ="block";
img.style.padding = 50+"px";
document.getElementById('right').appendChild(img);
}
</script>
</body>
</html>
此外还有设置margin paddding的实现方式
纯CSS分栏高度一致处理
如果table-cell的父元素不是table-row的话 浏览器会创建出一个默认的table-cell 但是个人建议还是自己手写比较好
-
table-cell的左栏固定右边自适应
原理很简单 就是简单的利用table-cell属性 便不进行赘述了
其他的实现方法请看
关于固定与自适应
个人认为 虽然table布局已经退出了人们的视线 但是不得不说 table-cell这个属性还是很有用的。
网友评论