(Element UI 组件 Table)去除单元格底部的横线

时间:2022-10-20 12:07:59

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

(Element UI 组件 Table)去除单元格底部的横线

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

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

(Element UI 组件 Table)去除单元格底部的横线

修改方式:在 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 &period;

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

  8. 合并table相同单元格的插件&lpar;基于jquery的&rpar;

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

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

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

随机推荐

  1. PHP扩展——C扩展实现滚动记录日志

    前言 万事开头难,没错就是这样!! 在没有真正开发PHP扩展之前,一直觉得PHP扩展开发对我来说是一个很遥远的事情,虽然自己有些C\C++基础,但是看PHP源码的时候还是很吃力,现在看来主要还是没有下 ...

  2. 如何使用代码动态的获取和设置ImageView的宽度和高度?

    http://blog.csdn.net/wulianghuan/article/details/8644144 国内某金融企业的一道面试题:如何在代码中获得一个ImageVIew的高度和宽度? 相信 ...

  3. struts2框架——从后台取得数据集,并在前台页面循环显示

    1.CourseBean.java public class CourseBean { private String f_courseId = ""; private String ...

  4. Django 学习笔记之二 基本命令

    1.新建一个 django project 在Django安装路径下找到django-admin.py文件,我的路径是在C:\Python27\Lib\site-packages\Django-1.1 ...

  5. Java程序员可能犯的3个常见SQL错误

    概述:Java程序员不仅要具备扎实的Java编程能力,在日常的工作当中往往还要涉及到其他语言的基础知识,尤其是SQL.那么哪些常见的SQL错误是程序员们容易犯的呢?让我们一起来看看吧! 你可能看到Ja ...

  6. WPF 中使slide控件拖动完成后改变变量值

    这个问题一开始觉得还是挺简单的,网上也看到不少解决方案. 首先一个最简单最直接的方案就是自定义一个名为FinalValue的依赖属性.随后重载OnThumbDragCompleted函数,在Thumb ...

  7. oracle sql developer 创建数据库链接

    sql developer中 创建 dblink,创建时,用户名 和密码都不需要加引号 create database link ykt_dblink2connect to account ident ...

  8. shell 关于字符切割 cut

    shell中运用于字符切割的是cut 其中 参数分别代表得意义是: -d :后面接分隔字符,将一段信息分割为数段,与 -f 一起使用 -f :将-d分割出来的数段 用 -f 取出第几段的意思 -c : ...

  9. highcharts&period;js的时间轴折线图

    工作中正好用到. 鼠标按住左键 左右移动可以试试 <!DOCTYPE> <html lang='en'> <head> <title>4-Highcha ...

  10. 20165304《Java程序设计》第七周学习总结

    教材学习内容总结 第11章 JDBC与MySQL数据库 MySQL数据库管理系统 MySQL数据库管理系统,简称MySQL,是世界上最流行的开源数据库管理系统,其社区版(MySQL Community ...