CSS calc无法用于< td>宽度 [英] CSS calc not working for <td> width

问题描述

我希望单元格A 为剩下的两个单元格恰好保留100px.我认为 calc(100％-100px)就足够了，因为它在其他许多情况下也可以正常工作.为什么它在这里不起作用?

I'd like Cell A to leave exactly 100px for the remain two cells. I would think calc(100% - 100px) would be sufficient as this works just fine in many other situations. Why isn't it working here?

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中，当在

At least in Chrome, it seems to work when defining the width on a colgroup element:

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中不再起作用.如果将来行为发生变化，我将保留答案作为测试用例.

This no longer seems to work in the current version of Chrome. I'll leave the answer to serve as a test case should the behavior change in the future.

这篇关于CSS calc无法用于< td>宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！