Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线。

这个底部横线其实是一个 border-bottom,不过对于表头使用了 th 元素,对于表数据使用了 td 元素,因此修改的时候需要兼顾两种元素。

如果你只是修改表数据的样式,而不修改表头,那只需修改 td 元素

修改方式:在 style 标签添加如下样式即可

//去掉表格内的线
table th,
table td {
border-bottom: none !important;
}
//去掉最下面的那一条线
.el-table::before {
height: 0px;
}
.customer-table .el-table__fixed-right::before,
.el-table__fixed::before {
width: 0;
}

(Element UI 组件 Table)去除单元格底部的横线的更多相关文章

  1. html table中单元格自动换行

    table中单元格自动换行样式: table-layout: fixed; word-wrap: break-word;   table-layout 可能的值(IE不支持inherit属性) 值 描 ...

  2. css table 合并单元格

    1. css table 合并单元格 colspan:合并列, rowspan:合并行, 合并行的时候,比如rowspan="2",它的下一行tr会少一列: 合并列的时候,比如co ...

  3. table中tr间距的设定table合并单元格 colspan(跨列)和rowspan(跨行)

    table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...

  4. table合并单元格

    table合并单元格 新建一张表格.要求表格有四行四列,当中第一行的四列合并,第二行.第三行和第四行的第一列合并 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  5. element ui组件的开始时间-结束时间验证

    <el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...

  6. ant design Table合并单元格合并单元格怎么用?

    1.ant design table合并单元格怎么用?

  7. table合并单元格colspan和rowspan .

    colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...

  8. 合并table相同单元格的插件(基于jquery的)

    正好项目中有个小需求, 要求把表格指定列中内容相同的单元格进行合并,本质上涉及的就是td的rowspan属性, 数出含相同内容单元格的个数, 然后给第一个与上一行内容不同的td其rowspan属性附上 ...

  9. bootstrap table 根据单元格中的数据改变单元格的样式

    在bootstrap-table.js里面列属性 formatter就是用来格式化单元格的,其默认值是undefined 类型是function,function(value,  row, index ...

随机推荐

  1. 3D饼/环Echarts图的实现

    首先确保在项目中引入了echarts和echarts-gl"echarts": "^4.9.0","echarts-gl": "^ ...

  2. [Java] 数据分析 -- NoSQL数据库

    MongoDB概念:与关系型数据库对应 database(数据库):数据库 collection(集合):表 document(文档):行 field(域):列/字段 注意事项 文档是一组键值(key ...

  3. [bug] idea编译后没有xml文件

    原因 在maven中build 参考 https://www.cnblogs.com/lewskay/p/6422464.html https://blog.csdn.net/lovequanquqn ...

  4. shell脚本就是由Shell命令组成的执行文件,将一些命令整合到一个文件中,进行处理业务逻辑,脚本不用编译即可运行。它通过解释器解释运行,所以速度相对来说比较慢。

    shell脚本?在说什么是shell脚本之前,先说说什么是shell. shell是外壳的意思,就是操作系统的外壳.我们可以通过shell命令来操作和控制操作系统,比如Linux中的Shell命令就包 ...

  5. SPI总线 通俗易懂讲解——(转载)

    SPI总线 MOTOROLA公司的SPI总线的基本信号线为3根传输线,即SI.SO.SCK.传输的速率由时钟信号SCK决定,SI为数据输入.SO为数据输出.采用SPI总线的系统如图8-27所示,它包含 ...

  6. Java反射机制详情(2)

    | |目录 运行环境 Java语言的反射机制 Class中的常用方法(获得类的构造方法) Class中的常用方法(获得类的属性) Class中的常用方法(获得类的方法) 反射动态调用类的成员 1.运行 ...

  7. 技术干货 | 源码解析 Github 上 14.1k Star 的 RocketMQ

    前言 Apache RocketMQ 作为广为人知的开源消息中间件,诞生于阿里巴巴,于 2016 年捐赠给了 Apache.从 RocketMQ 4.0 到如今最新的 v4.7.1,不论是在阿里巴巴内 ...

  8. yml配置从nacos配置中心取数据(单个或多个)

    读取单个文件 spring: application: name: test-server cloud: nacos: config: server-addr: localhost:8848 name ...

  9. 拖动登录框 HTML+CSS+js

    先上效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  10. Angel图算法

    Angel图算法 [2.0]CommonFriends 计算两个好友的共同好友数,某种程度上可以刻画两个节点之间的紧密程度. 输入 输入数据路径:输入文件所在路径,无权网络数据, 数据格式为两列 sr ...