表列宽度
表列宽度
提问于 2018-09-25 06:49:25
我有一个很大的HTML表(比如50列)，每个列都有4种可能的可配置样式：
- 自动(如flex 1) -> ' auto‘
- px (像素数) ->‘100 px’
- %(百分比数) -> '10%‘
- 内容(该列最大内容的宽度) -> ' 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元素，表格布局，弹性项目.但似乎没有什么能涵盖所有选择。
所有选项可能同时发生在不同的列:列1-auto，列2-200 20，列3-内容，列4-10%，列5-100 20，列6-20%.
Stackblitz：https://stackblitz.com/edit/table-widths
回答 2
Stack Overflow用户
发布于 2018-09-25 07:02:00
您可以尝试在css下面。它将向表中添加水平滚动条。
#list-tab-table {
overflow-x: auto;
}Stack Overflow用户
发布于 2018-09-25 09:46:25
我不太清楚您的各种描述所描述的是什么，但是很大程度上可以理解，但是可以在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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52492177
复制相关文章
相似问题
腾讯云开发者
