在表中使用 calc() [重复]

Posted 2023-03-06

【中文标题】在表中使用 calc() [重复]

【英文标题】：Using calc() in table [duplicate]

【发布时间】：2017-01-30 23:11:47

【问题描述】：

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

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% 被视为父级的宽度。问题是最后，我没有得到我所期望的，知道为什么吗？

【问题讨论】：

请分享您的标记。

你能提供一段 html 代码适用于这个 css 吗？

表格单元格的宽度由它所在的列决定，如果你需要它更宽，那么你需要在给定的单元格上使用colspan（如果你想要它要更窄，您需要在同一列中的其他单元格上使用 colspan）。

我添加了我的小提琴

我猜你要找的是简单的 padding-left 或 padding-right

【参考方案1】：

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

【参考方案2】：

如何在最后一个 th 上使用 15px 的 padding-right 来扩展它，然后在那个 th 内使用 一个 div 和一个棘手的 width 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>

【参考方案3】：

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

见using calc() with tables

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

【讨论】：

而不是回答你应该标记为重复

【参考方案4】：

在css中改变这个

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

 
thwidth:5%;