Как сделать, чтобы левый столбец соответствовал содержимому в вертикальной таблице?

Question

Есть ли способ сделать самый левый столбец подходящим для его содержимого в вертикальной таблице? Ожидание: Факт:

Answer 1

.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>

Answer 2

Вот один из способов автоматической подгонки ширины столбца к его содержимому с помощью css.В элемент th, который вы хотите вписать в контент, добавьте этот класс:

.auto-fit {
  width: 1px;
  white-space: nowrap;
}

StackBlitz с запущенным кодом находится здесь: https://stackblitz.com/edit/so-52815432-auto-fit-width-to-content