前言：
今天你们对“css表头悬浮”大致比较关切，各位老铁们都想要分析一些“css表头悬浮”的相关文章。那么小编也在网络上搜集了一些对于“css表头悬浮””的相关资讯，希望兄弟们能喜欢，姐妹们一起来学习一下吧！问题描述
elementui提供的el-table其实挺不错，不过有时候可能还需要对其进行样式的修改。官方也提供了相应的表格属性，方便我们去修改对应的样式，但是有的时候可能会少了点什么。
比如：想要把表格的高度都尽可能设置小点，这样的话，页面就可以展示更多行更多条数据了。但是单单使用下图中的表格的属性，发现没法让表格的高度设置最小
添加图片注释，不超过 140 字（可选）
解决方案
打开F12审查元素，会发现el-table默认带有内边距padding。把这个padding置为0就可以使其变成最矮的高度了。去掉padding就会发现表格的高度就是表格中文字内容撑开的高度。这个的确是最矮的了，如果觉得过于矮了，可以通过上图中的一些属性再去设置高点。
原始图（审查元素）
添加图片注释，不超过 140 字（可选）
上图中只审查了表头th，至于表格行td大家自己也可以审查看看
去除padding效果图
添加图片注释，不超过 140 字（可选）
代码附上
<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>总结先设置高度为最低，觉得低过头了，再调高一点
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css表头悬浮 #html表格边距怎么调宽
