CSS 计算不适用于 宽度
我想要Cell A为剩下的两个单元格留出 100px 的空间。我会想calc(100% - 100px)就足够了，因为这在许多其他情况下都可以正常工作。为什么这里不起作用？
table {
width: 100%;
border-collapse: collapse;
border: 1px solid #555;
font-family: sans-serif;
table-layout: fixed;
}
td {
padding: 10px;
box-sizing: border-box;
text-align: center
}
td+td {
border-left: 1px solid #555;
}
td:first-child {
width: calc(100% - 100px);
}
<table>
<tbody>
<tr>
<td>Cell A</td>
<td>Cell B</td>
<td>Cell C</td>
</tr>
</tbody>
</table>
至少在 Chrome 中，它在定义宽度时似乎有效colgroup https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup元素：
table {
width: 100%;
border-collapse: collapse;
border: 1px solid #555;
font-family: sans-serif;
table-layout: fixed;
}
td {
padding: 10px;
box-sizing: border-box;
text-align: center
}
td+td {
border-left: 1px solid #555;
}
colgroup:first-child {
width: calc(100% - 100px);
}
<table>
<colgroup/>
<colgroup span="2" />
<tbody>
<tr>
<td>Cell A</td>
<td>Cell B</td>
<td>Cell C</td>
</tr>
</tbody>
</table>
2020年4月1日更新
这似乎不再适用于当前版本的 Chrome。如果将来行为发生变化，我将留下答案作为测试用例。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
|
