删除 table 中的填充

Question

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

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

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

这是添加代码后的结果。

仅删除了顶部和底部的填充，但保留了左侧和右侧的填充。我认为填充来自 cell class，但我不确定如何删除它。

我试过了，但没用。

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

Answer 1

尝试使 div 填充 0 成为容器

.el-table {
   padding: 0px
}

Answer 2

基于来自元素框架网站的基本 Table——失去所有填充将是..

.el-table td {padding:0;}

如果您可以在一个片段中提供您的 html，您将得到具体的答案。

Answer 3

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

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

Answer 4

我在其他答案中找到它，致谢 Fab:

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

<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"  >

Remove padding in table