在 table 中使用 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 Fiddle reproduction.

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

Answer 1

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

Answer 2

在 css

中更改此设置

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

 }
th{width:5%; }

Answer 3

如何在最后一个上使用 15px 的 padding-right 来扩展它，然后在那个 th[=] 中使用 a div 27=] 使用棘手的 width calc(100% + 15px)，它不会给出 table 宽度的 1/12 + 15px，而是给出自然宽度其中 last 内容 + 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 4

您必须将 table-layout 属性设置为 'fixed'。

见using calc() with tables

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

在 table 中使用 calc()

Using calc() in table

css

css-calc