element ui表格使用border属性添加纵向框 表头为什么没有纵向框

在 Element UI 表格中，使用 `border` 属性添加纵向框时，表头并没有纵向框的原因是因为表头和表格内容是分开的两个 DOM 元素。如果要同时为表头和表格内容添加纵向框，可以通过设置表头的样式来实现，例如：

.el-table__header th {
  border-right: 1px solid #ebeef5;
}

这样就可以为表头添加纵向框了。

相关问题

element ui表格给表头加上纵向框

要给 Element UI 表格的表头加上纵向框，可以通过 `header-row-style` 属性来设置表头行的样式。具体操作如下：

1. 在表格的 `el-table` 标签中，添加 `header-row-style` 属性，并设置样式值：

<el-table :data="tableData" :header-row-style="{borderBottom: '2px solid #ccc'}">
  <!-- 表格列定义 -->
</el-table>

2. 在样式中，通过 `::before` 伪元素来添加纵向框样式：

.el-table__header th::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 1px;
  background-color: #ccc;
}

这样就可以给表格的表头加上纵向框了。不过需要注意的是，这种方法会使表头的列宽略微变宽。

element ui表格给表头加上纵向框且不污染全局样式

如果你想要在 Element UI 表格中给表头加上纵向框，但又不想污染全局样式，可以使用以下方法：

1. 定义一个局部的 CSS 类，用于设置表头行的样式，例如 `.my-table__header-row`。

<el-table
  :data="tableData"
  :header-row-class-name="'my-table__header-row'"
>
  <!-- 表格列定义 -->
</el-table>

2. 在 CSS 样式中，通过该局部 CSS 类来设置表头行的样式，并使用 `::before` 伪元素来添加纵向框样式。

/* 定义局部 CSS 类 */
.my-table__header-row {
  border-bottom: 2px solid #ccc;
}

/* 使用局部 CSS 类来设置表头行样式 */
.my-table__header-row th::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 1px;
  background-color: #ccc;
}

这样就可以给表格的表头加上纵向框，而且不会污染全局样式。