Menu
Can someone explain why the two table layouts below aren't the same (specifically, why the second 'table-cell' div doesn't stretch to take up the rest of the width of the 'table' parent div, as it does in the real table)?
<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>
Edit: turns out you get some unexpected behaviour if you try and style an image as a table-cell:
<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>
The 2nd cell-styled div doesn't stretch all the way horizontally to fill the rest of the table width. If you add content to it, it gradually does though. Weird.
859
Unless the a table-cell element's parent is a table-row element (and its parent element is a table element) or table element, anonymous table and table-row elements are inserted for you. Anonymous elements cannot be styled.
If you want your table-cell elements to take up the entire available width, you need to make an explicit table element to contain them for styling purposes.
http://tinker.io/29b92
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
