Может ли перекрытие colspan на ячейках таблицы сжиматься до соответствия?

Question

Я не могу понять, что это за жизнь меня. Возьмите таблицу с двумя строками, каждая с 2 ячейками. В верхнем правом и нижнем левом ячейках установлено значение colspan="2" (так что таблица действительно имеет 3 столбца). Если ячейки non-colspan имеют изображение 100 × 100 внутри, а ячейки colspan имеют изображение 200 × 100, вы ожидаете, что ширина таблицы будет примерно как 300, верно? Нет, нет! Это больше похоже на 400.

Смотрите эту ручку: http://codepen.io/sandwich/pen/apYPdL

Похоже, что colspan «D клетки жадные на ширину, которая идет вразрез с типичной таблицы размеров сокращающихся клеток по размеру содержимого.

Может ли кто-нибудь осветить такое поведение? В ручке желаемый результат состоит в том, чтобы первые две строки были такими же, как и при добавлении третьей строки, но без добавления третьей строки.

Answer 1

Если ячейки без colspan имеют изображение 100 × 100 внутри, а ячейки colspan имеют изображение 200 × 100, вы ожидаете, что ширина таблицы будет примерно равной 300, верно?

Ну, наверное, если <table> был border-collapse:collapse, но как это separate и 20px левой и правой границы, это 80px дополнительные 2 столбца. это минимум 380 пикселей.

По вопросу table-layout:fixed по умолчанию auto. Использование fixed позволит вам больше контролировать поведение таблицы.

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>