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

Question

有没有办法让最左边的列在垂直 table 中适合它的内容？ 期待： 实际的：

Answer 1

这是一种使用 css 自动调整列宽以适应其内容的方法。 在要适合内容的第 th 个元素上，添加此 class:

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