My table has 4 columns with different widths:
column 1: fixed width of 500px;
column 2: calc(33% - 165px);
column 3: calc(33% - 165px);
column 4: calc(33% - 165px);
Despite having the same value for the last 3 columns, their actual widths are different.
Here is the HTML code:
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 500px;">Vishal</td>
<td style="width: calc(33% - 165px); background: #ff0000;">Sherathiya</td>
<td style="width: calc(33% - 165px); background: #ffff00;">28</td>
<td style="width: calc(33% - 165px); background: #ff00ff;">edit</td>
</tr>
<tr>
<td>Seema</td>
<td>Kaneria</td>
<td>23</td>
<td>edit</td>
</tr>
<tr>
<td>Nikunj</td>
<td>Ramani</td>
<td>20</td>
<td>delete</td>
</tr>
</tbody>
</table>
Below is the CSS code:
.table {
width: 100%;
}
For the solution, I had to add table-layout: fixed and style the header as well.
Modified HTML code:
<table class="table">
<thead>
<tr>
<th style="width: 500px;">First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 500px;">Vishal</td>
<td class="field">Sherathiya</td>
<td class="field">28</td>
<td class="field">edit</td>
</tr>
<tr>
<td>Seema</td>
<td>Kaneria</td>
<td>23</td>
<td>edit</td>
</tr>
<tr>
<td>Nikunj</td>
<td>Ramani</td>
<td>20</td>
<td>delete</td>
</tr>
</tbody>
</table>
Updated CSS code:
.field {
width: calc(33% - 165px);
background: #ff0000;
}