calc 不计算宽度

Question

我有一个表格，其中有 4 列：

column 1: fixed width of 500px;
column 2: calc(33% - 165px);
column 3: calc(33% - 165px);
column 4: calc(33% - 165px);

最后 3 列的值相同，这些列的宽度不同。

这是我的html：

<table class="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width: 500px;">Vishal</td>
      <td style="width: calc(33% - 165px); background: #ff0000;">Sherathiya</td>
      <td style="width: calc(33% - 165px); background: #ffff00;">28</td>
      <td style="width: calc(33% - 165px); background: #ff00ff;">edit</td>
    </tr>
    <tr>
      <td>Seema</td>
      <td>Kaneria</td>
      <td>23</td>
      <td>edit</td>
    </tr>
    <tr>
      <td>Nikunj</td>
      <td>Ramani</td>
      <td>20</td>
      <td>delete</td>
    </tr>
  </tbody>
</table>

这里是css：

.table {
  width: 100%;
}

这里是重现问题的代码笔：

https://codepen.io/Vishal1419/pen/aqOErL

解决方案：

我必须有table-layout: fixed。此外，我还必须为标题应用样式。所以，现在

我的 html 看起来像：

<table class="table">
  <thead>
    <tr>
      <th style="width: 500px;">First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width: 500px;">Vishal</td>
      <td class="field">Sherathiya</td>
      <td class="field">28</td>
      <td class="field">edit</td>
    </tr>
    <tr>
      <td>Seema</td>
      <td>Kaneria</td>
      <td>23</td>
      <td>edit</td>
    </tr>
    <tr>
      <td>Nikunj</td>
      <td>Ramani</td>
      <td>20</td>
      <td>delete</td>
    </tr>
  </tbody>
</table>

和css：

表{ 表格布局：固定； 宽度：100%； }

.field { 宽度：计算（33% - 165px）； 背景：#ff0000； }

Answer 1

只需使用 css 并给它们类：

html, body {
  width: 100%;
}

.field {
  width: calc(33% - 165px);
  background: #ff0000;
}

HTML：

<td style="width: 500px;">Vishal</td>
  <td class="field">Sherathiya</td>
  <td class="field">28</td>
  <td class="field">edit</td>