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

Posted 2023-03-06

【中文标题】表格单元格增加宽度，尽管盒子大小：border-box

【英文标题】：Table cells increases width despite box-sizing: 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。

【参考方案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;

希望这会有所帮助。