0

问题描述

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

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

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

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

clipboard.png

相关代码

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

<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,色值为红色的样式。

杨辉 18
2019-05-18 提问
1 个回答
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;
}
1
回复 杨辉

单独给table加个class,将样式作用于该class下面

寻梦无痕 · 5月19日

展开评论

撰写答案

推广链接