如何更改Element Table组件的Border（大小和颜色）

Question

问题描述

https://element.eleme.cn/#/zh...

如何更改Element Table组件的Border（大小和颜色）
比如我想让table和tr，td外部的框，宽度为1，颜色为红色，应该怎么做？

问题出现的环境背景及自己尝试过哪些方法

在使用Element Table组件时，我需要对表格进行打印。
默认的边框太细，颜色太淡，打印效果不佳。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<template>
  <el-table
    :data="tableData"
    border
    show-summary
    style="width: 100%">
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="amount1"
      sortable
      label="数值 1">
    </el-table-column>
    <el-table-column
      prop="amount2"
      sortable
      label="数值 2">
    </el-table-column>
    <el-table-column
      prop="amount3"
      sortable
      label="数值 3">
    </el-table-column>
  </el-table>

你期待的结果是什么？实际看到的错误信息又是什么？

田字形边框变成宽度为1，色值为红色的样式。

Answer 1

审核元素写样式覆盖原有的样式即可。

.el-table--border:after,
.el-table--group:after,
.el-table:before {
    background-color: red;
}

.el-table--border,
.el-table--group {
    border-color: red;
}

.el-table td,
.el-table th.is-leaf {
        border-bottom: 1px solid red;
}

.el-table--border th,
.el-table--border th.gutter:last-of-type {
        border-bottom: 1px solid red;
}

.el-table--border td,
.el-table--border th {
        border-right: 1px solid red;
}

Answer 2

样式可以的,管用