css issue table design - html

Question

please can you help me to fix the design to make data more clear ,i will be very grateful if you help me ,thanks for your answer in advance
this is my css file
table-layout: fixed;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
overflow: hidden;
}
this is my html file
<div class="col-md-12">
<div class="table-wrap">
<table class="table table-striped" >
<thead>
<tr>
<th class="odd" colspan="4">id</th>
<th class="odd" colspan="4">name</th>
<th *ngIf="isAdmin()" class="odd" colspan="4"> password</th>
<th class="odd" colspan="4">role</th>
<th class="odd" colspan="4"class="corner wideRow">email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let el of users | paginate: { itemsPerPage: 2, currentPage: p }">
<th class="odd" colspan="4" ></th>
<td class="odd" colspan="4" >{{el.id}} </td>
<td class="odd" colspan="4" >{{el.username}}</td>
<td *ngIf="isAdmin()" class="odd" colspan="4">{{el.password}}</td>
<td class="odd" colspan="4" >{{el.role}}</td>
<td class="odd" colspan="4" >{{el.email}}</td>
<td class="odd" colspan="4">
<tr>
<a *ngIf="isAdmin()"
class="btn btn-danger" (click) = "deleteUser(el.id)" >Delete</a>
<a *ngIf="isAdmin()" class="btn btn-success" data-original-title="Edit">Edit</a>
</tr>
</td>
</tbody>
</table>
</div>
</div>
</div>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
this the result ,it's not clear and i didn't khnow how to fixed it
when i add in csstable td { word-break: break-all;
}**
the result
result 2

Answer 1

1.) Having colspan="4" in each cell does not make any sense.
2.) The first (empty) th element in the tbody rows causes the misaligning you wrote about. Erase that to have IDs under the "id" header, names under the "name" header etc.
3.) You need an additional th cell in the header row (at the end) to have the same amount of cells as in the rows below it (above the cells with the nested tables which contain the two buttons).
.table-striped {
width: 100%;
border-collapse: collapse;
}
table td {
border: 1px solid #ddd;
word-break: break-all;
}
<table class="table table-striped">
<thead>
<tr>
<th class="odd">id</th>
<th class="odd">name</th>
<th *ngIf="isAdmin()" class="odd"> password</th>
<th class="odd">role</th>
<th class="odd">email</th>
<th class="odd"></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let el of users | paginate: { itemsPerPage: 2, currentPage: p }">
<td class="odd">{{el.id}} </td>
<td class="odd">{{el.username}}</td>
<td *ngIf="isAdmin()" class="odd">{{el.password}}</td>
<td class="odd">{{el.role}}</td>
<td class="odd">{{el.email}}</td>
<td>
<table>
<tr>
<td>
<a *ngIf="isAdmin()" class="btn btn-danger" (click)="deleteUser(el.id)">Delete</a>
</td>
<td>
<a *ngIf="isAdmin()" class="btn btn-success" data-original-title="Edit">Edit</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

Answer 2

Add this css
table td {
word-break: break-all;
}
And use this corrected html. Make sure you header columns and body columns are equals.
<div class="col-md-12">
<div class="table-wrap">
<table class="table table-striped">
<thead>
<tr>
<th class="odd" colspan="4">id</th>
<th class="odd" colspan="4">name</th>
<th *ngIf="isAdmin()" class="odd" colspan="4"> password</th>
<th class="odd" colspan="4">role</th>
<th class="odd" colspan="4">email</th>
<th class="odd" colspan="4"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let el of users | paginate: { itemsPerPage: 2, currentPage: p }">
<td class="odd" colspan="4">{{el.id}} </td>
<td class="odd" colspan="4">{{el.username}}</td>
<td *ngIf="isAdmin()" class="odd" colspan="4">{{el.password}}</td>
<td class="odd" colspan="4">{{el.role}}</td>
<td class="odd" colspan="4">{{el.email}}</td>
<td>
<table>
<tr>
<td>
<a *ngIf="isAdmin()" class="btn btn-danger" (click)="deleteUser(el.id)">Delete</a>
</td>
<td>
<a *ngIf="isAdmin()" class="btn btn-success" data-original-title="Edit">Edit</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>