layui table 单元格内容垂直居中
时间: 2023-06-30 11:10:07 浏览: 381
单行图片文字垂直居中问题——实战
使用layui table组件实现单元格内容垂直居中的方法有多种,下面列举其中两种比较常用的方法:
方法一:通过设置CSS样式实现单元格内容垂直居中
在单元格中添加一个自定义的样式,例如:
```
{field: 'name', title: '姓名', align: 'center', style:'height:50px;line-height:50px;padding:0 10px;'}
```
其中style属性中设置了单元格的高度、行高和内边距,使得单元格内容垂直居中。需要注意的是,如果表格中的内容比较多,需要适当调整单元格的高度和行高。
方法二:通过设置templet属性实现单元格内容垂直居中
在单元格中添加一个自定义模板列,并在模板中设置内容垂直居中,例如:
```
{field: 'name', title: '姓名', templet: function(d){
return '<div style="height:50px;line-height:50px;text-align:center;">'+d.name+'</div>';
}}
```
其中templet属性中返回的是一个包含HTML代码的字符串,通过设置div元素的高度、行高和文本对齐方式来实现单元格内容垂直居中。需要注意的是,如果表格中的内容比较多,需要适当调整div元素的高度和行高。
以上两种方法均可以实现单元格内容垂直居中的效果,根据具体的需求选择合适的方法即可。
阅读全文