css - 在表中使用 calc()

Question

我试图用来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 小提琴再现。

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

Answer 1

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

请参阅将 calc() 与表一起使用

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

Answer 2

如何在最后一个 th 上使用 15px 的 padding-right来扩展它，然后在该 th 内使用一个带有棘手宽度 calc(100% + 15px)的 div，它不会给出表格宽度的 1/12 + 15px ，它反而给出了最后一个内容的自然宽度 + 15px，这并不是你所需要的。

我立即发布此内容的原因只是为了分享一个对解决问题有用的想法：

table, tr {
    width:100%;
    border: 1px solid black;
    height:10px;
}

th {
  border-right: 1px solid black;
}

th:last-child {
  padding-right: 15px;
}

th:last-child > div {
  width: calc(100% + 15px);
}

<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>
      <div>Column 12</div>
    </th>
  </tr>
</thead>
</table>

Answer 3

在css中改变这个

th:last-child {
       width: calc( 100%/12 + 100px );
       background-color:#ccc;

 }
th{width:5%; }

Answer 4

基本上，您将 设置table为 a widthof 100% + 15px。因此，除非父元素允许这样做，否则大多数浏览器将重新计算100%并相应地缩放TH' 和TD'。为什么不用于min-width最后一个孩子？