html 表格高度调整,elementui中el-table修改表头高度和行高度（设置最低高度）

问题描述

elementui提供的el-table其实挺不错，不过有时候可能还需要对其进行样式的修改。官方也提供了相应的表格属性，方便我们去修改对应的样式，但是有的时候可能会少了点什么。

比如：想要把表格的高度都尽可能设置小点，这样的话，页面就可以展示更多行更多条数据了。但是单单使用下图中的表格的属性，发现没法让表格的高度设置最小

解决方案

打开F12审查元素，会发现el-table默认带有内边距padding。把这个padding置为0就可以使其变成最矮的高度了。去掉padding就会发现表格的高度就是表格中文字内容撑开的高度。这个的确是最矮的了，如果觉得过于矮了，可以通过上图中的一些属性再去设置高点。

原始图(审查元素)

上图中只审查了表头th，至于表格行td大家自己也可以审查看看

去除padding效果图

最矮的图

是不是很矮，哈哈。觉得矮可以再设置高一点

代码附上

:data="tableData"

border

style="width: 100%"

>

export default {

name: "app",

data() {

return {

tableData: [

{

date: "2016-05-02",

name: "王小虎",

address: "上海市普陀区金沙江路 1518 弄",

},

{

date: "2016-05-04",

name: "王小虎",

address: "上海市普陀区金沙江路 1517 弄",

},

{

date: "2016-05-01",

name: "王小虎",

address: "上海市普陀区金沙江路 1519 弄",

},

{

date: "2016-05-03",

name: "王小虎",

address: "上海市普陀区金沙江路 1516 弄",

},

],

};

},

};

看css部分

#app {

width: 100%;

height: 100%;

.el-table {

// 看这里！！！！！！！！！！！！！！！！！！！！！！！！！！！！

// 深度选择器，去除默认的padding

/deep/ th {

padding: 0 ;

}

/deep/ td {

padding: 0 ;

}

}

}

总结

先设置高度为最低，觉得低过头了，再调高一点