layui table 列宽
时间: 2023-07-30 09:07:22 浏览: 1226
你可以通过在表格中设置每列的宽度来调整Layui表格中列的宽度。以下是一些方法:
1. 使用lay-data属性设置列宽度。
在表格的每个th标签中,使用lay-data属性来设置宽度。例如:
```html
<th lay-data="{width: 200}">列名</th>
```
2. 使用CSS设置列宽度。
你可以使用CSS设置表格中每列的宽度。例如:
```css
.layui-table td:nth-child(1) {
width: 200px;
}
```
3. 使用JavaScript设置列宽度。
可以使用JavaScript设置表格中每列的宽度。例如:
```javascript
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test',
cols: [[
{field:'id', width:200, title: 'ID'},
{field:'username', width:200, title: '用户名'},
{field:'sex', width:200, title: '性别'},
{field:'city', width:200, title: '城市'},
{field:'sign', width:200, title: '签名'}
]]
});
});
```
在上面的代码中,我们使用cols选项来设置每列的宽度。
阅读全文
相关推荐


















