可以重叠表格单元上的colspan是否缩小到合适？

-1

我无法想象这一个为我的生活。拿一张有2行的表格，每行有2个单元格。右上角和左下角的单元格设置为colspan="2"（所以表格确实有3列）。如果非colspan单元格内部有100×100图像，并且colspan单元格的图像宽度为200×100，那么您会希望表格宽度为300左右，对不对？不要禁止！它更像是400可以重叠表格单元上的colspan是否缩小到合适？

看到这个笔：http://codepen.io/sandwich/pen/apYPdL

这似乎是colspan“D细胞是贪婪的宽度，这是抵触萎缩细胞以适应内容的典型表大小。

任何人都可以照亮这种行为吗？在笔中，期望的结果是前两行像添加第三行那样自行调整大小，但没有必要添加第三行。

来源

2017-02-04 Sandwich

如果非colspan细胞内部有一个100×100的图像，而colspan细胞有一个200×100的图像，那么你会希望表格宽度是300左右，对吗？

那么很可能，如果<table>有border-collapse:collapse但因为它是separate，左为20px，右边缘，这对2列80px额外费用。至少380px。

尝试table-layout:fixed默认为auto。使用fixed将允许您更多地控制表的行为。

CODEPEN

代码片段

// 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>

来源

2017-02-04 12:19:36 zer00ne

可以重叠表格单元上的colspan是否缩小到合适？

回答

相关问题