I have a nested table displayed in my HTML, and I am attempting to set each column to be 50% width, but for some reason it's not working.
In the past, whenever I've needed to accomplish this, applying table-layout: fixed has usually done the trick. However, this time it doesn't seem to be effective.
What could be going wrong? Check out the editor link here
<table class="employment" *ngFor="let item of empTabData| slice:1">
<div class="container" fxLayout="row " fxLayout.xs="column">
<div class="item-1 " fxFlex="50%" fxFlex.xs="100%">
<tr *ngFor="let i of item.employerInfo | slice:0:(item.employerInfo.length/2)+1">
<td class="emp">
{{i.key}}
</td>
<td class="emp">
{{i.value}}
</td>
</tr>
</div>
<div class="item-1" fxFlex="50%" fxFlex.xs="100% ">
<tr *ngFor="let i of item.employerInfo | slice:(item.employerInfo.length/2)+1:item.employerInfo.length">
<td class="emp">
{{i.key}}
</td>
<td class="emp">
{{i.value}}
</td>
</tr>
</div>
</div>
</table>
p {
font-family: Lato;
}
.employment {
border-collapse: collapse;
width: 100%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
font-family: 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 12px;
font-weight: 500;
margin: 1%;
white-space: nowrap;
}
.employment tr:nth-child(even) {
background: #fafafa;
}
.emp {
width: 50%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
export class AppComponent {
empTabData = [{"employerInfo":[{"key":"UAN","value":"100460235222"}]},{"employerInfo":[{"key":"Matched Name","value":"UAT Test Aadhaar Name"},{"key":"User Id","value":"442ad831-983f-44ca-ac7f-e1851c911fb3"},{"key":"ID","value":"PYBOM00250170000001586"},{"key":"Employer","value":"EMIDS TECHNOLOGIES PVT LTD"},{"key":"Settled","value":"true"}]},{"employerInfo":[{"key":"Matched Name","value":"UAT Test Aadhaar Name"},{"key":"User Id","value":"442ad831-983f-44ca-ac7f-e1851c911fb3"},{"key":"ID","value":"PYKRP17189390000010001"},{"key":"Employer"},{"key":"Settled","value":"false"}]}]
}