Question

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

＆＃13;

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 );
}

＆＃13;

<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>

＆＃13;

JS Fiddle reproduction

我除以12，因为它是我表格中的列数。据我所知，100％被视为父母的宽度。问题是，最后，我没有得到我所期望的，任何想法为什么？

Answer 1

您必须将table-layout属性设置为＆＃39;已修复＆＃39;。

请参阅http://localhost:3002/app/module.js

工作示例：CodePen

Answer 2

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

Answer 3

在css中更改此内容

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

 }
th{width:5%; }

Answer 4

如果在最后一个上使用填充右侧15px来扩展它，然后使用一个内部的div 并使用棘手的宽度calc（ 100％+ 15px），它不会提供表格宽度的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>

在表中使用calc（）

4 个答案: