如何使最左边的列适合垂直表中的内容？

Question

是否有一种方法可以使最左边的列适合垂直表中的内容？ 期望： 实际：

Answer 1

这是使用CSS自动将列宽调整为其内容的一种方法。 在您要适合内容的元素上，添加此类：

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

运行代码的StackBlitz在这里：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>