css - 在表中使用 calc()

<分区>

我正在尝试使用 calc 来修复我的 th:last-child 的宽度，它与其他的相差 15px。我所做的是:

th:last-child {
   width: calc( (100% - 30px)/12 + 30px );
}
table, tr {
width:100%;
border: 1px solid black;
height:10px;
}
th {
  border-right: 1px solid black;
  width: calc( (100% - 30px)/12 );
}

<table>
<thead>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
    <th>Column 5</th>
    <th>Column 6</th>
    <th>Column 7</th>
    <th>Column 8</th>
    <th>Column 9</th>
    <th>Column 10</th>
    <th>Column 11</th>
    <th>Column 12</th>
  </tr>
</thead>
<tbody>
 <tr>
    <td>Row 1</td>
    <td>Row 2</td>
    <td>Row 3</td>
    <td>Row 4</td>
    <td>Row 5</td>
    <td>Row 6</td>
    <td>Row 7</td>
    <td>Row 8</td>
    <td>Row 9</td>
    <td>Row 10</td>
    <td>Row 11</td>
    <td>Row 12</td>
 </tr>
  
 </tbody>
 </table>

JS Fiddle reproduction .

我除以 12 因为它是我表中的列数。据我了解，100% 被视为父级的宽度。问题是最后，我没有得到我期望的结果，知道为什么吗？

最佳答案

您必须将 table-layout 属性设置为“固定”。

参见 using calc() with tables

和工作示例:https://jsfiddle.net/rpyydd5n/3/

关于css - 在表中使用 calc()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39637941/