在 `
layui.table.render({})` 中
使用复选框 {type: '
checkbox'}，如果不居中，可以通过设置 CSS 样式来实现。具体方法如下：
1. 为表格添加一个 ID，例如：`<table id="test"></table>`
2. 在 CSS 样式文件中添加以下
代码：
```css
.
layui-table-cell {
vertical-align: middle !important;
}
```
这样就可以实现
复选框居中的效果了。
示例
代码如下：
```
html
<!DOCTYPE
html>
<
html>
<head>
<meta charset="utf-8">
<title>表格
复选框居中示例</title>
<link rel="stylesheet" href="
layui/css/
layui.css">
<style>
.
layui-table-cell {
vertical-align: middle !important;
}
</style>
</head>
<body>
<table id="test"></table>
<script src="
layui/
layui.js"></script>
<script>
layui.use('table', function(){
var table =
layui.table;
//渲染表格
table.render({
elem: '#test',
cols: [[
{type: '
checkbox'},
{field:'id', title:'ID', width:80},
{field:'username', title:'用户名'},
{field:'sex', title:'性别', width:80, sort:true},
{field:'city', title:'城市'},
{field:'sign', title:'签名'},
{field:'experience', title:'积分', width:80, sort:true},
{field:'score', title:'评分', width:80, sort:true},
{field:'classify', title:'职业'},
{field:'wealth', title:'财富', width:135, sort:true},
{fixed: 'right', title:'操作', toolbar:'#barDemo', width:150}
]],
data: [{
"id":"10001",
"username":"张三",
"sex":"男",
"city":"北京",
"sign":"人生需要
动态规划",
"experience":"116",
"score":"87",
"classify":"工程师",
"wealth":"999999"
}, {
"id":"10002",
"username":"李四",
"sex":"女",
"city":"上海",
"sign":"每个人都有一个梦想，我的梦想就是写出优美的
代码",
"experience":"666",
"score":"66",
"classify":"工程师",
"wealth":"666666"
}, {
"id":"10003",
"username":"王五",
"sex":"女",
"city":"深圳",
"sign":"让天下没有难写的
代码",
"experience":"86",
"score":"86",
"classify":"工程师",
"wealth":"888888"
}],
page: true
});
});
</script>
</body>
</
html>
```
在上面的
代码中，我们为表格的单元格添加了一个样式 `.
layui-table-cell`，并设置了 `vertical-align: middle !important;`，这样就可以实现
复选框居中的效果了。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
5716
