Ячейки таблицы увеличиваются по ширине, несмотря на размер блока: border-box

Question

Я хочу добавить заполнение в ячейки моей таблицы, когда нажимаю кнопку View, но это увеличивает ширину ячейки. Я видел этот вопрос , это и это , однако он все равно увеличивает размер ячейки.

Мой 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>

Это воспроизводимое поведение при стеке . Пожалуйста, нажмите View в таблице, чтобы воспроизвести такое поведение.

Что у меня сейчас:

После нажатия кнопки View ширина столбцов стала шире:

Как избежать увеличения ширины ячейки? Я просто хотел бы немного переместить текст в правую часть only td, которая содержит данные 'a', 'b', 'c' и '1' и '2'. , а не во всех ячейках.

Нежелательно менять ширину столбцов при клике, и я бы хотел, чтобы эти 3 столбца переместились вправо на 80px?

Answer 1

Попробуйте использовать приведенный ниже код, я смог подтвердить с вами angular код:

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

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

Надеюсь, это поможет.