Whenever I click the View button, I want to apply padding to the cells in my table. However, this action also increases the width of the cell. Despite researching various solutions like those found in this question, this one, and this post, I still encounter issues with enlarging the cell size.
This is how my CSS is set up:
.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 here is my HTML structure:
<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>
You can see a live example showcasing this behavior on StackBlitz. Click the View button within the table to experience the issue firsthand.
Here's what currently happens:
https://i.sstatic.net/QtOaq.png
After clicking the View button, the columns widen as shown below:
https://i.sstatic.net/gWdI8.png
How can I prevent the cell width from increasing? My goal is to move text slightly towards the right side within only td elements containing 'a', 'b', 'c', '1', and '2', without affecting all other cells.
I prefer not to change the column widths upon clicking and instead wish to shift those specific columns to the right by 80px.