[英]Table column width
我有一个很大的HTML表(如50列),每列有4种可能的可配置样式:
<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
您可以在CSS下面尝试。 它将向表添加水平滚动条。
#list-tab-table {
overflow-x: auto;
}
我不清楚您的各种描述所描述的内容,但是可以实现很多,但是可以在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.