Could you assist me in improving the design to enhance data clarity? Your help would be greatly appreciated. Thank you for your anticipated response.
CSS File:
table-layout: fixed;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
overflow: hidden;
}
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>
The current result is not clear and I am uncertain how to improve it. https://i.sstatic.net/LBJF1.png
I attempted to add this to the CSS but did not achieve the desired outcome:
table td { word-break: break-all;}** the result result 2