通常,我们将块元素转换为表格模型以实现“类似表格”的显示,现在,作为您问题的解决方案:我发现自己正在做相反的事情。
主要思想是将您的表格转换为块模型设计,我们可以控制每个元素的宽度。我的解决方案的主要收获是,您可以使用 CSS 函数(如 calc)为列提供响应宽度 [如 calc(100% - 100px)]。但是我的解决方案的主要缩小是当您在同一行中有不同的单元格高度时的情况。幸运的是,可以使用假柱技术轻松修复。(我使用了 one-true-layout)
所以,说了这么多,让我们看一下解决方案:(其中一些是在 CSS 部分中编写的,使用常规 CSS 选择器而不是按照您的要求内联,因为这对我来说更容易。但是您可以复制-将所有内容都传递到正确的位置并使其全部内联)
工作小提琴 测试: Chrome,IE10,FF
HTML(我添加了,<tbody>
因此您可以应用内联 CSS 样式)
<table>
<tbody>
<tr>
<td style="background-color:red; width: 100px;">100px</td>
<td style="background-color:yellow; width: calc(100% - 100px);">100% - 100px<br/>another line to demonstrate <i>faux column</i></td>
</tr>
<tr>
<td style="background-color:azure; width:50%;">50%</td>
<td style="background-color:pink; width:50%;">50%</td>
</tr>
</tbody>
</table>
CSS(所有样式都可以内联)
*
{
margin: 0;
padding: 0;
}
table, tbody, tr
{
display: block;
}
tr
{
overflow: hidden; /*Faux column*/
}
td
{
float: left;
padding-bottom: 99999px; /*Faux column*/
margin-bottom: -99999px; /*Faux column*/
}