关于html5:elementui中eltable修改表头高度和行高度设置最低高度

问题形容

elementui 提供的 el-table 其实挺不错，不过有时候可能还须要对其进行款式的批改。官网也提供了相应的表格属性，不便咱们去批改对应的款式，然而有的时候可能会少了点什么。
比方：想要把表格的高度都尽可能设置小点，这样的话，页面就能够展现更多行更多条数据了。然而单单应用下图中的表格的属性，发现没法让表格的高度设置最小

解决方案

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

原始图（审查元素）

上图中只审查了表头 th，至于表格行 td 大家本人也能够审查看看

去除 padding 效果图

最矮的图

是不是很矮，哈哈。感觉矮能够再设置高一点

代码附上

<template>
  <div id="app">
    <el-table 
      :data="tableData" 
      border 
      style="width: 100%"
    >
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
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 弄",
        },
      ],
    };
  },
};
</script>

看 css 局部

<style lang="less" scoped>
#app {
  width: 100%;
  height: 100%;
  .el-table {
    // 看这里！！！！！！！！！！！！！！！！！！！！！！！！！！！！// 深度选择器，去除默认的 padding
    /deep/ th {padding: 0 ;}
    /deep/ td {padding: 0 ;}
  }
}
</style>

总结

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