javascript - 表格列宽

Question

我有一个很大的 HTML 表格(比如 50 列)，每列都有 4 种可能的可配置样式:

• 自动(如 flex 1)-> '自动'
• px(像素数)-> '100px'
• %(百分比数字)-> '10%'
• content(该列最大内容的宽度)-> 'content'

<table *ngIf="features.length > 0" id="list-tab-table" #listTabTable>
    <colgroup>
        <col *ngFor="let attribute of features[0].getAttributesListView(); let i = index" [ngClass]="{
                'cls-auto': attribute.listviewwidth === 'auto',
                'cls-content': attribute.listviewwidth === 'content',
                'cls-px': attribute.listviewwidth.indexOf('px') > 0,
                'cls-percent': attribute.listviewwidth.indexOf('%') > 0
            }">
    </colgroup>
    <thead>
        <tr class="label-row">
            <th *ngFor="let attribute of features[0].getAttributesListView()">
                <p>{{attribute.label}}</p>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let feature of features; let i = index">
            <td *ngFor="let attribute of feature.getAttributesListView()" title="{{attribute.value}}">
                <p [innerHTML]="attribute.value"></p>
            </td>
        </tr>
    </tbody>
</table>

我已经尝试了我所知道的一切:col 元素、表格布局、flex 元素......但似乎没有任何东西涵盖所有选项。

所有选项可能同时出现在不同的列中:column1-auto、column2-200px、column3-content、column4-10%、column5-100px、column6-20%...

堆栈 Blitz :https://stackblitz.com/edit/table-widths

Answer 1

你可以试试下面的css。它将向表格添加水平滚动条。

#list-tab-table {
    overflow-x: auto;        
}