layui table表头变窄自动换行
时间: 2023-06-29 07:13:51 浏览: 517
如果您想要当表头内容过长时,自动变宽、换行显示,可以通过设置`minWidth`属性来实现。
例如:
```
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th lay-data="{field:'id', width:80, sort:true}">ID</th>
<th lay-data="{field:'username', width:120}">用户名</th>
<th lay-data="{field:'email', minWidth:200}">邮箱地址(自动换行)</th>
<th lay-data="{field:'sex', width:80, sort:true}">性别</th>
<th lay-data="{field:'city', minWidth:100}">城市</th>
<th lay-data="{field:'sign', minWidth:100}">签名</th>
<th lay-data="{field:'experience', sort:true}">积分</th>
<th lay-data="{field:'score', sort:true}">评分</th>
<th lay-data="{field:'classify', minWidth:100}">职业</th>
<th lay-data="{field:'wealth', sort:true}">财富</th>
</tr>
</thead>
<tbody>
<tr>
<td>10001</td>
<td>user-1</td>
<td>user-1@qq.com</td>
<td>男</td>
<td>北京</td>
<td>程序员</td>
<td>1000</td>
<td>90</td>
<td>IT</td>
<td>999999</td>
</tr>
<!-- more data -->
</tbody>
</table>
```
在上面的例子中,第三列表头内容设置了`minWidth:200`,表示当表头内容不够宽时,自动变宽,同时会自动换行显示。您可以根据实际情况调整`minWidth`属性的值。
阅读全文