Can overlapping colspan on table cells shrink-to-fit? - html

Question

I can’t figure this one out for the life of me. Take a table that has 2 rows, each with 2 cells. The top-right and bottom-left cells are set to colspan="2" (so the table really has 3 columns). If the non-colspan cells have a 100×100 image inside, and the colspan cells have a 200×100 image, you’d expect the table width to be something like 300, right? Nope nope nope! It’s more like 400.
See this pen: http://codepen.io/sandwich/pen/apYPdL
It seems like the colspan’d cells are greedy for width, which goes contrary to typical table sizing of shrinking the cells to fit the content.
Can anyone shine a light on this behavior? In the pen, the desired result is for the first two rows to size themselves like they do when the third row is added, but without the third row having to be added.

Answer 1

If the non-colspan cells have a 100×100 image inside, and the colspan cells have a 200×100 image, you’d expect the table width to be something like 300, right?
Well probably if the <table> had border-collapse:collapse but as it is separate and 20px left and right borders , that's 80px extra for 2 columns. that's 380px at minimum.
Try table-layout:fixed the default is auto. Using fixed will allow you more control of a table's behavior.
CODEPEN
SNIPPET
// Toggle visibility of 3rd row, which has no spanned cells.
$(".toggle_3rd_row").click(function() {
$(".row_3").fadeToggle();
});
// Toggle applying CSS widths to <td>s
$(".toggle_widths").click(function() {
$("table").toggleClass("defined_sizes");
})
body {
padding: 20px;
}
img {
display: block;
}
table {
width: 400px;
margin: 20px 0;
table-layout: fixed;
}
table.defined_sizes .cell_1-1 {
width: 100px;
}
table.defined_sizes .cell_1-2 {
width: 220px;
}
table.defined_sizes .cell_2-1 {
width: 220px;
}
table.defined_sizes .cell_2-2 {
width: 100px;
}
table .row_3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle_3rd_row">Toggle third row</button>
<button class="toggle_widths">Toggle cell widths in CSS</button>
<table border="1" cellpadding="0" cellspacing="20">
<caption>Why do the cells only size properly with the colspan-less third row present??</caption>
<tr>
<td class="cell_1-1">
<img src="http://placehold.it/100x100?text=100w">
</td>
<td colspan="2" class="cell_1-2">
<img src="http://placehold.it/222x100?text=222w">
</td>
</tr>
<tr>
<td colspan="2" class="cell_2-1">
<img src="http://placehold.it/222x100?text=222w">
</td>
<td class="cell_2-2">
<img src="http://placehold.it/100x100?text=100w">
</td>
</tr>
<tr class="row_3">
<td>
<img src="http://placehold.it/100x100?text=100w">
</td>
<td>
<img src="http://placehold.it/100x100?text=100w">
</td>
<td>
<img src="http://placehold.it/100x100?text=100w">
</td>
</tr>
</table>