Table cells increases width despite box-sizing: border-box

Question

I want to add padding to the cells of my table when I click button View, but this increases width of the cell. I've seen this question , this and this, however it still increases the size of the cell.

My CSS looks like this:

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

And 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. Please click View in the table to reproduce such behavior.

What I have now:

After View button is clicked, then the width of columns became wider:

How to avoid of increasing cell width? I just would like to move text slightly to the right side of only td which contains data 'a', 'b', 'c' and '1' and '2'., not in all cells.

It is not desirable to change the columns width on click along with that and I would like those 3 columns to move to the right on 80px?

What do you really want to do? You are using item?.show and there is no show property in your dataset. you need to apply css on td to make it work. — Jasdeep Singh, Apr 24 '20 at 20:25
@Prince I am sorry, I forgot to write that it is necessary to click `View` in the table to reproduce such behavior — Learner, Apr 24 '20 at 20:41
The default cell width is 50px and you add a padding of 100px when clicking on `View`. The cell width will increase to accomodate it. Try adding a padding of 20px instead; the cell width will not change. — ConnorsFan, Apr 24 '20 at 21:00
See [this stackblitz](https://stackblitz.com/edit/angular-ubazha?file=src%2Fapp%2Fapp.component.css). — ConnorsFan, Apr 25 '20 at 00:07

score 3 · Accepted Answer · answered Apr 25 '20 at 18:31

3

Try using below code, I was able to validate with you angular code:

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

answered Apr 25 '20 at 18:31

Manjuboyz

6,978
3
21
43

thank you very much! Thank you, master! Have a nice day! Could you add a little bit explanation of reason of increasing width? :) – Learner Apr 25 '20 at 20:11
2

Usually Table, and td will shrink and expand based on the contents unless you specify how much width you size for the column for Ex. if you have 4 columns with 100% width then it is good to fix the width of 25% each for the columns so that the td won't change w.r.t data, so in your case that is what happened, when the padding executes it changes it's width based on the movement, so either you can fix the table layout or fix the td width. Hope it helps! – Manjuboyz Apr 26 '20 at 07:02

score 2 · Answer 2 · answered Apr 25 '20 at 14:10

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

Hope this will help.

Table cells increases width despite box-sizing: border-box

2 Answers2

Linked