删除表格中的填充答案

【问题标题】：Remove padding in table删除表格中的填充
【发布时间】：2021-04-20 03:15:40
【问题描述】：

我正在使用 Element UI 表格来将我的数据制成表格。我的问题是我无法移除单元格内的填充物。这是在我进行任何更改之前。

我想删除绿色框周围的所有空格。我添加此代码以删除填充。

<el-table :data="tableData" size="mini" :cell-style="{ padding: 0 }">

这是在添加代码之后。

只有顶部和底部的填充被移除，但左侧和右侧的填充仍然存在。我认为填充来自cell class，但我不确定如何删除它。

我试过了，但是没用。

.el-table .cell {
  padding: 0px
}

【问题讨论】：

【解决方案1】：

尝试将 div 填充为 0 的容器

.el-table {
   padding: 0px
}

【讨论】：

【解决方案2】：

基于元素框架网站的基本表——丢失所有的填充......

.el-table td {padding:0;}

如果你可以在 sn-p 中提供你的 html，你会得到具体的答案。

【讨论】：

【解决方案3】：

.el-table td, .el-table th.is-leaf {border-bottom: 1px solid #ebeef5;padding: 0px;}

这可以通过将padding 设置为0px 来实现。

【讨论】：

【解决方案4】：

我在其他答案中找到了，感谢 Fab：

基本上，您应该在没有范围属性的情况下将类创建到您的样式中：

<style>
.selected-cell {
  padding:0 !important;
}     
</style>

<style scoped>

/* other styles here*/

</style>

然后，进入方法创建它：

cellStyle() {
  return "selected-cell"
},

最后，在你的使用中 :cell-class-name="cellStyle" :

<el-table
    :data="tableData"
    :cell-class-name="cellStyle"  >

【讨论】：