Dav*_*ave 7 html css css-tables
有人可以解释为什么下面的两个表格布局不一样(具体来说,为什么第二个'table-cell'div不会拉伸以占据'table'父div的宽度的其余部分,因为它在真正的表)？
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head></head>
<body>
<div style="width: 100%; border: 1px solid black;">
<div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
<div style="display: table-cell; border: 1px solid red;">.</div>
<div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
</div>
<table style="width: 100%; border: 1px solid black; border-spacing: 0;">
<tr>
<td style="width: 20px; border: 1px solid red;">.</td>
<td style="border: 1px solid red;">.</td>
<td style="width: 20px; border: 1px solid red;">.</td>
</tr>
</table>
</body>
</html>
编辑:如果您尝试将图像设置为表格单元格,则会出现一些意外行为:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css"><![CDATA[
* {border: 1px solid black;}
table, .table, .row {
width: 100%;
}
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
img {
height: 21px;
width: 21px;
}
]]></style>
</head>
<body>
<div class="table">
<div class="row">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" class="cell" />
<div class="cell">
</div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" class="cell" />
</div>
</div>
</body>
</html>
第二个单元格样式的div不会一直拉伸以填充表格宽度的其余部分.如果你向它添加内容,它会逐渐增加.奇怪的.
cim*_*non 10
除非table-cell元素的父元素是表格行元素(并且其父元素是表元素)或表元素,否则将为您插入匿名表和表格行元素.匿名元素无法设置样式.
如果希望table-cell元素占用整个可用宽度,则需要创建一个显式表元素以包含它们以用于样式目的.
<div style="width: 100%; display: table; border: 1px solid black;">
<div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
<div style="display: table-cell; border: 1px solid red;">.</div>
<div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
</div>