el-table怎么显示所有边框

在Element UI的el-table组件中，如果你想让表格的所有列都显示边框，你需要设置table的样式，特别是在tbody部分。你可以通过`.el-table__body tr`类来选择所有的表格行，然后设置`border`属性。

下面是一个简单的示例，展示如何全局启用表格边框：

<style scoped>
.el-table {
  border-collapse: collapse; /* 合并相邻单元格的边框 */
}

.el-table__body tr {
  border-bottom: 1px solid #ccc; /* 设置每行底部的边框 */
  border-left: 1px solid #ccc; /* 设置左侧的边框 */
  border-right: 1px solid #ccc; /* 设置右侧的边框 */
}
</style>

<template>
  <el-table :data="tableData" style="width: 100%">
    <!-- ... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...] // 表格数据
    };
  }
};
</script>

这里假设你想要的是默认的灰色细线边框，你可以根据自己的需求调整颜色和宽度。

相关问题

el-table的一条el-table-column边框加粗

el-table的一条el-table-column边框加粗可以通过使用CSS样式来实现。可以在el-table-column上添加一个CSS类，然后给这个类添加边框样式，例如：

.el-table-column-border {
border: 2px solid black;
}

然后，在el-table-column中使用这个类：

<el-table-column class="el-table-column-border" ...></el-table-column>

这样就可以使el-table-column的边框加粗了。

全局针对el-table 中的el-table-column边框加粗

如果你想在Element UI的`el-table`组件中让所有的列边框加粗，你可以通过修改全局样式或者使用 scoped 模式来自定义单元格的样式。以下是两种常见的方式：

1. **全局样式**:
如果你希望对所有页面的`el-table-column`都生效，可以在CSS文件中添加如下的规则：

   .el-table-column {
     border-width: 2px; /* 可以调整宽度 */
     border-style: solid;
     border-color: your-desired-color; /* 设置边框颜色 */
   }

2. **Scoped样式** (如果你使用的是Vue.js):
在`.vue`组件的`<style>`标签内，使用`:is`选择器来限制样式只作用于`el-table-column`元素：

   <template>
     <el-table :columns="columns">
       <!-- ... -->
     </el-table>
   </template>

   <style scoped>
     el-table-column {
       border-width: 2px;
       border-style: solid;
       border-color: your-desired-color;
     }
   </style>

记得替换`your-desired-color`为你想要的边框颜色。