layui table表头换行
时间: 2023-06-29 12:13:51 浏览: 227
您可以使用`lay-data`属性来定义表头内容,然后在表头内容中添加`<br>`标签来实现换行。例如:
```
<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', width:200}">邮箱地址<br>(可换行)</th>
<th lay-data="{field:'sex', width:80, sort:true}">性别</th>
<th lay-data="{field:'city'}">城市</th>
<th lay-data="{field:'sign'}">签名</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>
```
在上面的例子中,第三列使用`<br>`标签来实现表头换行。注意,如果表头内容中包含HTML标签,需要使用`lay-data`属性来定义表头的相关属性,比如`field`、`width`、`sort`等。
阅读全文