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

Question

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

Can you show a reproduction of what you mean? Are you just using a normal table? I suggest you review thishttps://stackoverflow.com/questions/26915087/how-to-get-the-td-in-html-tables-to-fit-content-and-let-a-specific-td-fill/26915414 — Jeremy Wilken, Oct 15 '18 at 23:31
@JeremyWilken No it's not a normal table. It's a vertical table in Clarity UI. What I need is to make the labels column to fit to the longest text in all of the rows and the remaining space will stretch with the values column. Please see edited description. — Jeonsoft FaceBundy, Oct 18 '18 at 06:22
Possible duplicate of [How to get the in HTML tables to fit content, and let a specific fill in the rest](https://stackoverflow.com/questions/26915087/how-to-get-the-td-in-html-tables-to-fit-content-and-let-a-specific-td-fill) — gfullam, Nov 27 '18 at 16:54

score 1 · Accepted Answer · answered Oct 16 '18 at 18:29

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

answered Oct 16 '18 at 18:29

hippeelee

1,788
1
10
21

Thanks @hippeelee I forked your stackblitz I was able to achieve what I wanted with these css classes: https://stackblitz.com/edit/so-52815432-auto-fit-width-to-content-vrzzfr – Jeonsoft FaceBundy Oct 18 '18 at 06:37

score 0 · Answer 2 · answered Oct 18 '18 at 06:40

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

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

2 Answers2