表格单元格增加宽度，尽管盒子大小：border-box答案

【问题标题】：Table cells increases width despite box-sizing: border-box表格单元格增加宽度，尽管盒子大小：border-box
【发布时间】：2020-08-08 12:26:38
【问题描述】：

我想在单击按钮View 时为表格的单元格添加填充，但这会增加单元格的宽度。我见过this question、this 和this，但它仍然会增加单元格的大小。

我的 CSS 如下所示：

.move-right div {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding-left: 100px;
  font-weight: bold;
  max-width: 100%;
  background-color: lightgreen;
}

还有 HTML：

<table class="table">
    <thead>
      <tr>
        <th>Foo</th>
        <th>Bar</th>
        <th></th>
      </tr>
    </thead>
    <tbody>        
        <ng-container *ngFor="let item of data">
          <tr [ngClass]="{'move-right': item?.show == 1}">
              <td>
                {{ item.foo }}
              </td>
              <td>{{ item.bar }}</td>
              <td>
                <ul  *ngIf="item.items && item.items.length > 0"
                  (click)="(item.show ? (item.show = 0) : (item.show = 1))"> 
                  {{ item.show ? 'Hide' : 'View' }} 
                </ul>
              </td>
          </tr>
          <ng-container *ngIf="item.show==1">
              <tr *ngFor="let num of item.items" class="move-right">                  
                  <td> <div>{{num}} </div> </td>
                  <td> <div>{{ num }}</div> </td>
                  <td> <div>{{ num }}</div> </td>
              </tr>
          </ng-container>
        </ng-container>
    </tbody>
</table>

This is a reproduced behavior at the stackblitz。请点击表中的View 重现此类行为。

我现在拥有的：

点击View按钮后，列宽变宽了：

如何避免增加单元格宽度？我只想将文本稍微移动到仅td 的右侧，其中包含数据'a'、'b'、'c'和'1'和'2'。，而不是所有单元格。

在点击时更改列宽是不可取的，我希望这 3 列在 80px 上向右移动？

【问题讨论】：

你真正想做什么？您正在使用 item?.show 并且数据集中没有 show 属性。您需要在 td 上应用 css 才能使其工作。
@Prince 不好意思，忘记写了需要点击表格中的View才能重现这种行为
默认单元格宽度为 50px，点击View 时添加 100px 的内边距。单元格宽度将增加以适应它。尝试添加 20px 的填充；单元格宽度不会改变。
@ConnorsFan 你能用代码显示吗，你的意思是什么？
见this stackblitz。

标签： html css angular

【解决方案1】：

尝试使用下面的代码，我可以用你的角度代码进行验证：

*{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

table {
  border-collapse: collapse;
  width: 100%;
table-layout:fixed;
}
table td, table th {
  border: 1px solid red;
color:red;

}

table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

ul{
padding:0;
}  

 .move-right td{     
  font-weight: bold;
  background-color: lightgreen;
  padding-left:80px;
  }

【讨论】：

非常感谢！谢谢楼主！祝你今天过得愉快！您能否对增加宽度的原因进行一些解释？ :)
通常是 Table 和 td 会根据内容收缩和扩展，除非您指定 Ex. 列的宽度。如果您有 4 列宽度为 100%，那么最好为每列固定 25% 的宽度，以便 td 不会更改 wrt 数据，所以在您的情况下，当填充执行时它会发生变化它的宽度基于移动，因此您可以修复表格布局或修复 td 宽度。希望对您有所帮助！

【解决方案2】：

table {
  border-collapse: collapse;
  width: 100%;
}
table td, table th {
  border: 1px solid black;  
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

.move-right div {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding-left: 5px;   /* change this from 100 to 5px */
  font-weight: bold;
  max-width: 100%;
  background-color: lightgreen;
}

希望这会有所帮助。

【讨论】：