-
table常見問(wèn)題
<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
一些小的注意的點(diǎn)
1 table默認(rèn)顯示 display:table; 設(shè)置padding無(wú)效（一般不會(huì)有人對(duì)table進(jìn)行padding操作）矛纹。
2 tr默認(rèn)顯示 display：table-row 設(shè)置margin padding統(tǒng)統(tǒng)無(wú)效 路操。設(shè)置border時(shí)需要將table的table-collapse屬性設(shè)置為collapse离唬。
3 td默認(rèn)為 dispaly:table-cell margin無(wú)效 而且如果對(duì)元素設(shè)置absolute 或者設(shè)置float則會(huì)導(dǎo)致其功能失效。
-
table-cell的無(wú)敵功能
-
實(shí)現(xiàn)兩欄等高
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>
此外還有設(shè)置margin paddding的實(shí)現(xiàn)方式
純CSS分欄高度一致處理
如果table-cell的父元素不是table-row的話 瀏覽器會(huì)創(chuàng)建出一個(gè)默認(rèn)的table-cell 但是個(gè)人建議還是自己手寫比較好
-
table-cell的左欄固定右邊自適應(yīng)
原理很簡(jiǎn)單 就是簡(jiǎn)單的利用table-cell屬性 便不進(jìn)行贅述了
其他的實(shí)現(xiàn)方法請(qǐng)看
關(guān)于固定與自適應(yīng)
個(gè)人認(rèn)為 雖然table布局已經(jīng)退出了人們的視線 但是不得不說(shuō) table-cell這個(gè)屬性還是很有用的。
