当前位置: 首页 > Web前端 > HTML5

elementui中的el-table修改表头高度和行高(设置最小高度)

时间:2023-04-05 01:58:30 HTML5

#app{width:100%;高度:100%;.el-table{//看这里!!!!!!!!!!!!!!!!!!!!!!!!!!!!//深度选择器,去掉默认的padding/deep/th{padding:0;}/deep/td{填充:0;}}}问题描述elementui提供的el-table其实还是挺好的,但是有时候可能需要修改一下它的样式。官方也提供了对应的表格属性,方便我们修改对应的样式,但是有时候可能会缺少一些东西。比如:我想把表格的高度设置的越小越好,这样页面可以显示更多的行,更多的数据。但是仅仅使用下图中表格的属性,我发现表格的高度不能设置为最小解。打开F12查看元素,会发现el-table默认是有padding的。将此填充设置为0将使其成为最短高度。如果去掉padding,会发现表格的高度就是表格中文字内容的高度。这确实是最短的。如果觉得太短,可以通过上图中的一些属性设置高一点。原图(reviewelements)中,上图中只对表头th进行了review。至于tablerowtd,大家也可以自己复习一下,看看去掉padding效果后的最短图片是不是很短,哈哈。如果你觉得短,你可以把它设置得高一点。将代码附加到看css部分#app{width:100%;高度:100%;.el-table{//看这里!!!!!!!!!!!!!!!!!!!!!!!!!!!!//深度选择器,去掉默认的padding/deep/th{padding:0;}/deep/td{填充:0;}}}综上所述,先把高度设置到最低,如果觉得太低,再调高