javascript - 表格列宽
问题描述
我有一个很大的 HTML 表(比如 50 列),每列有 4 种可能的可配置样式:
- 自动(如 flex 1)-> 'auto'
- px(像素数)-> '100px'
- %(百分比数字)-> '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 元素、表格布局、弹性项目……但似乎没有任何东西能涵盖所有选项。
所有选项可能同时出现在不同的列中:column1-auto、column2-200px、column3-content、column4-10%、column5-100px、column6-20%...
Stackblitz:https ://stackblitz.com/edit/table-widths
解决方案
我不太清楚您的各种描述所描述的内容,但是可以实现很多目标,但可以在标签上输入特定属性并在元素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>
推荐阅读
- arrays - 它不适用于leetcode,但它适用于vscode——一个数组问题
- javascript - 如何在 React.js 中查看对象状态
- python-3.x - Python编码计算器
- javascript - 如何将按钮点击函数内的变量传递给另一个点击函数并转换为参数?
- wpf - 如何通过水晶报表在两个表格中显示分组数据
- spring-boot - SpringBoot WebClient - exchangeToMono
- python - 如何在二维图中绘制 3 轴信息?
- vuejs2 - 如何从单选按钮获取值并在 url 中使用它
- c++ - 重载函数的特征
- ios - 如何将 double 转换为 int 并将其显示在 swiftUI 中的 Text 上?