How to make the left-most column fit to content in vertical table? - vmware-clarity

Question

Is there a way to make the left most column fit to it's content in a vertical table?
Expectation:
Actual:

Answer 1

Here is one way to auto-fit a columns width to its content using css.
On the th element you want to fit to content, add this class:
.auto-fit {
width: 1px;
white-space: nowrap;
}
StackBlitz with running code is here: https://stackblitz.com/edit/so-52815432-auto-fit-width-to-content

Answer 2

.auto-fit-vertical th {
width: 1px;
white-space: nowrap;
}
.auto-fit-vertical td {
width:100%;
}
<table class="table table-compact table-vertical auto-fit-vertical">
<tbody>
<tr>
<th>Username</th>
<td style="font-weight: bold">{{user?.userName}}</td>
</tr>
<tr>
<th>Email</th>
<td>{{user?.email}}</td>
</tr>
<tr>
<th>Email Confirmed</th>
<td [ngStyle]="{ color: user?.emailConfirmed ? 'green' : 'red' }">
<clr-icon [attr.shape]="user?.emailConfirmed ? 'check' : 'times'"></clr-icon>
</td>
</tr>
<tr>
<th>Recovery Email</th>
<td>{{user?.recoveryEmail}}</td>
</tr>
<tr>
<th>Mobile Number</th>
<td>{{user?.mobileNo}}</td>
</tr>
<tr>
<th>Phone Number</th>
<td>{{user?.phoneNumber}}</td>
</tr>
<tr>
<th>Phone Number Confirmed</th>
<td [ngStyle]="{ color: user?.phoneNumberConfirmed ? 'green' : 'red' }">
<clr-icon [attr.shape]="user?.phoneNumberConfirmed ? 'check' : 'times'"></clr-icon>
</td>
</tr>
<tr>
<th>Is System Administrator</th>
<td [ngStyle]="{ color: user?.isSystemAdministrator ? 'green' : 'red' }">
<clr-icon [attr.shape]="user?.isSystemAdministrator ? 'check' : 'times'"></clr-icon>
</td>
</tr>
<tr>
<th>Is Two-Factor Enabled</th>
<td [ngStyle]="{ color: user?.twoFactorEanbled ? 'green' : 'red' }">
<clr-icon [attr.shape]="user?.twoFactorEanbled ? 'check' : 'times'"></clr-icon>
</td>
</tr>
<tr>
<th>Is Lockout Enabled</th>
<td [ngStyle]="{ color: user?.lockout ? 'green' : 'red' }">
<clr-icon [attr.shape]="user?.lockout ? 'check' : 'times'"></clr-icon>
</td>
</tr>
<tr>
<th>Is Confirmed</th>
<td [ngStyle]="{ color: user?.confirmed ? 'green' : 'red' }">
<clr-icon [attr.shape]="user?.confirmed ? 'check' : 'times'"></clr-icon>
</td>
</tr>
<tr>
<th>Is Active</th>
<td [ngStyle]="{ color: user?.active ? 'green' : 'red' }">
<clr-icon [attr.shape]="user?.active ? 'check' : 'times'"></clr-icon>
</td>
</tr>
<tr>
<th>Date Created</th>
<td>{{user?.dateCreated|date:'long'}}</td>
</tr>
</tbody>
</table>