Question

我想在单击按钮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的右侧，其中{{1}}包含数据'a'，'b'，'c'和'1'和'2'。，并非在所有单元格中。

不希望同时更改单击时的列宽，我希望这3列在80px处向右移动？

Answer 1

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

希望这会有所帮助。

Answer 2

尝试使用以下代码，我可以与您验证角度代码：

*{
  -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;
  }

尽管具有框大小，但表格单元格仍会增加宽度：边框框

2 个答案: