表格欄寬

Question

我有一個很大的HTML表（如50列），每列有4種可能的可配置樣式：

• 自動（例如flex 1）->'自動'
• px（以像素為單位）->'100px'
• ％（百分比數字）-> '10％'
• 內容（該列的最大內容的寬度）->'內容'

<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元素，表布局，伸縮項目...但是似乎沒有什么可以覆蓋所有選項。

所有選項可能會在不同的列中同時發生：column1-auto，column2-200px，column3-content，column4-10％，column5-100px，column6-20％...

Stackblitz： https ：//stackblitz.com/edit/table-widths

Answer 1

您可以在CSS下面嘗試。 它將向表添加水平滾動條。

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

Answer 2

我不清楚您的各種描述所描述的內容，但是可以實現很多，但是可以在table標記上撥入特定屬性，並在col元素上設置寬度等。

假設col元素的數量是已知的，則可以實現百分比寬度。

一些例子：

我認為這是您的“自動”選項

 table { border: 1px solid grey; background: greenyellow; width: 100%; } col:nth-of-type(2n) { background: pink; } col {} 

 <table> <colgroup> <col> <col> <col> <col> </colgroup> <thead> <tr> <th>columns</th> <th>second column</th> <th>third column</th> <th>fourth column</th> </tr> </thead> <tbody> <tr> <td>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat id vero debitis nihil ducimus esse!</td> <td>more content</td> <td>random comment</td> <td>more stuff</td> </tr> </tbody> </table> 

固定像素寬度選項

 table { border: 1px solid grey; background: greenyellow; } col:nth-of-type(2n) { background: pink; } col { width: 100px; } 

 <table> <colgroup> <col> <col> <col> <col> </colgroup> <thead> <tr> <th>columns</th> <th>second column</th> <th>third column</th> <th>fourth column</th> </tr> </thead> <tbody> <tr> <td>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat id vero debitis nihil ducimus esse!</td> <td>more content</td> <td>random comment</td> <td>more stuff</td> </tr> </tbody> </table> 

選項：

 table { border:1px solid grey; background: greenyellow; width:100%; table-layout: fixed } col:nth-of-type(2n) { background: pink; } col:nth-child(2) { width:50%; } 

 <table> <colgroup> <col> <col> <col> <col> </colgroup> <thead> <tr> <th>columns</th> <th>second column</th> <th>third column</th> <th>fourth column</th> </tr> </thead> <tbody> <tr> <td>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat id vero debitis nihil ducimus esse!</td> <td>more content</td> <td>random comment</td> <td>more stuff</td> </tr> </tbody> </table> 

內容確定選項：

 table { border: 1px solid grey; background: greenyellow; } col:nth-of-type(2n) { background: pink; } col {} 

 <table> <colgroup> <col> <col> <col> <col> </colgroup> <thead> <tr> <th>columns</th> <th>second column</th> <th>third column</th> <th>fourth column</th> </tr> </thead> <tbody> <tr> <td>Lorem ipsum dolor sit, amet consectetur </td> <td>more content</td> <td>random comment</td> <td>more stuff</td> </tr> </tbody> </table>