element-ui 表格table加border属性，右边框不显示

已于 2022-04-12 18:06:23 修改
阅读量7.9k 收藏
点赞数 2
文章标签： vue.js 前端 elementui scss html5
于 2022-04-12 18:04:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxlny/article/details/124130297
版权
博客内容讲述了在使用Element UI的el-table组件时遇到的边框不显示问题。作者发现由于内置样式设置了`.el-table--border`的`border-right`和`border-bottom`为none，导致右侧和下侧边框消失。通过注释掉该样式或者为表格添加固定宽度如99.6%来解决了此问题。这是一个关于前端开发中CSS调整和UI组件使用的案例。
摘要由CSDN通过智能技术生成 
<el-table :data="systemData"

                border

                stripe

               >

        <el-table-column type="index"

                         label="#"

                         width="60"

                         align="center"></el-table-column>

</el-table>

右侧的边框不显示，打开控制台，发现css 有这个属性

.el-table--border {

  1. border-right: none;
  2. border-bottom: none;

}

把第一个样式注释就了，因为是自带，怕改到其他地方。给table样式加一个宽度99%，也可完美展示，问题解决。应该是表格溢出了

<el-table :data="systemData"
                border
                stripe
                style="width: 99.6%">
        <el-table-column type="index"
                         label="#"
                         width="60"
                         align="center"></el-table-column>
</el-table>

阿龙姓张
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ELEMENTUI 之EL-TABLE 的一点小总结[表头内容错位[自定义BORDER问题][自定义列宽度]
qq_44242030的博客
05-25 1309
标签： vue HTML5 JavaScript html css 前端在开发PC 端项目时，现在用的比较多的就是Element UI,而在PC端管理系统中，Table 可以说是必不可少，刚开始使用对table没有做过多的处理，可是在需要做一些处理时，对其文档不熟悉使用不熟练总出现一些意想不到的问题。 表头和内容错位： 解决在全局中添加 样式可解决： .el-table th.gutter { display: table-cell !important; } 自定义table 边框及单元格边框
Element-UI快速入门
热门推荐
专注于Java领域开发 关注我 带你玩转Java
03-09 9万+
什么是Element UI 这篇文章会告诉你 带你快速入门 学会Element UI
el-table的border属性失效问题解决方案
最新发布
qq_71214810的博客
03-15 3036
如图所示，下面是el-table使用了border属性后没有效： 看了下官方文档，并且检查了下自己写的并没有错误
el-table添加border边框线不显示
weixin_48305373的博客
08-23 6931
1.固定了表格的高度 height=“250” 把高度去掉。注意要把表单的高度去掉不然会有表单对不齐。
element中表头添加边框，右侧边框不显示的问题
L_eiDigaga的博客
05-17 2577
在最近的大屏项目中使用element的表格，要固定表头，还要修改原样式，其他样式都好修改，唯独给表头添加边框时，会有问题，右侧边框显示不出来。 就像这样，试了各种办法，因为固定表头后，下方内容就会出现滚动条，所以它这个表头的末尾添加了一个空的th和滚动条的宽度一样影响的。 起初给这个空标签添单独加左边框也能实现，但是当内容长度达不到滚动时或者空内容时，就不好使了，最后发现被一个属性影响了 这就简单了 更改这个属性为默认值真解决了 /deep/.el-table .el-table__header
Element-UI学习之旅-Border边框及图标
weixin_43387852的博客
04-16 1万+
你能获得什么？      如何设置Border边框，如何使用icon图标，了解到Element-ui字体和颜色的知识 Border 边框   我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。 border主要有三个属性 border的边框样式，solid(实线)和 dashed(虚线) ，使用方法为： <div style="border: solid 1px red"> 这是一个DIV 实线
elementUI 表格固定某些列后，下边框和侧边框不显示（被遮盖）
zhengyun1568的博客
02-26 3708
转载自：https://my.oschina.net/u/3680343/blog/3144548https://www.cnblogs.com/shuen/p/10196545.html 给table设置样式，解决底部边框被遮盖 .el-table__fixed { height: 100% !important; //设置高优先，以覆盖内联样式 } .el-table__fixed-right { height: 100% !important; //设置高优先，以覆盖内联样式 } 添加css
vue项目中将element-ui table表格写成组件的实现代码
10-16
Element-UI的表格组件提供了很多属性来控制表格的样式，比如边框大小（borderSize）、是否高亮当前行（highlightCurrentRow）等。我们在封装组件时，可以根据实际需要开放这些属性给父组件。 4. 插槽的使用。...
element-ui 表格实现单元格可编辑的示例
08-27
`el-table` 组件可以通过设置 `border` 属性来添加边框，可以通过设置 `width` 属性来设置表格的宽度。 实现可编辑单元格 要实现可编辑单元格，我们需要使用 `el-table-column` 组件，并在其中使用 `template` ...
el-table去表格边框（vue element-ui ）
梁小茹的博客
06-24 5240
话不多说 直接上代码 // 去掉表格单元格边框 .customer-table th { border: none; } .customer-table td, .customer-table th.is-leaf { border: none; } // 表格最外边框 .el-table--border, .el-ta
element-ui 表格列el-table-column根据数据展示不同内容
不知名的博客
10-15 1万+
element-ui 表格 列el-table-column如何根据数据不同显示不同的值 使用element-ui的表格时，有时候后台给的字段和要显示在表格列里的内容不一致。 例如后台给的是status，它的值为true或false，要求显示在表格里是‘正确’或‘错误’ 这时可以给el-table-column添加一个属性：formatter html代码： <el-table ref="accountTable" :data="accountsListData" border> &
el-table设置边框后底部边框无法展示的解决方法
123
09-03 4133
在使用Element-UI的el-table组件时，使用cell-style给表格增加边框后，最底部的一条横线无法显示，这时候不要怀疑是自己的css写的不对，原因在于el-table的样式文件中给.el-table这个class设置了position:relative，导致无法正确显示。只需要把样式文件中的这个属性删除掉即可，暂时没发现有什么影响。 ...
vue+elementui 打印表格不显示表格边框线
weixin_42590539的博客
01-11 2124
如果 Vue 项目使用了 Element UI 组件库中的 Table 组件打印表格时不显示表格边框线，可以通过在 CSS 中覆盖样式来解决。 可以在项目中新建一个 CSS 文件，如 print.css，在该文件中添加如下样式： /* 表格边框 */ table { border-collapse: collapse; border: 1px solid black; } /* 表格内容...
【若依前后端分离】el-table带边框和斑马纹
敲厉害的燕宝的博客
02-03 727
单个添加：el-dialog 加上 ：close-on-click-modal='false'全部添加：在main.js中添加。全部添加：main.js中添加。
css写了边框显示不全或不显示
weixin_42220130的博客
06-13 1万+
div{ width: 100%; border: solid 5px green; } 此时可能边框显示的不全不是上下左右都有，或者不显示边框， 这个是因为宽度100%再+边框超过100%了，可以把width改成100%以下就可以了。 其他原因暂时还未发现。 div{ width:97%; border: solid 5px green; } ...
element表格点击一行给行添加border
summer_cloudy的博客
03-04 3917
由于element ui有一套自己的样式，在实际工作中，我们可能不会照搬，一般会根据需求和设计对element ui进行调整，但是有时候自己写的样式会被element ui影响，不能成功应用。 这次我的工作就是给element表格点击一行给行添加border，按照正常的方式给el-table tr添加border 是行不通的。以下提供两种思路： 一.点击的时候给tr 添加需要的样式（border） <el-table class="outer-table" :data="[list
element表格（无边框）
PEACEMINUSON的博客
01-04 755
【代码】element表格（无边框）
解决electron-vue中element-ui表格无法显示问题
summer鸿的博客
07-10 3834
1.之前用vue做过很多次项目，都没有出现类似问题，一开始我怀疑我element-ui的版本不对，陆续重新下了依赖还是不显示。 2. 后面解决方法是，在如下文件中加入element-ui就可以解决。
element-ui el-table表格合计不显示解决办法
qq_30675311的博客
01-08 1342
设置max-height就好了 <el-table border show-summary :max-height="clientHeight" class="report_table" :data="breakfastData"> <el-table-column label="日期" width="180"> <template slot-scope="scope
vue element-ui table vue-print-nb 打印预览 边框线显示不全
05-09
这个问题可能是由于打印样式导致的。可以尝试在打印样式中添加以下代码： ```css .el-table__header, .el-table__footer { border-collapse: collapse; border-spacing: 0; } .el-table__header th, .el-table__footer td, .el-table__footer th, .el-table__body td, .el-table__body th { border: 1px solid #ddd; padding: 8px; line-height: 1.42857143; vertical-align: top; } ``` 这样可以让表格的边框线在打印时完全显示。如果问题仍然存在，可以尝试调整样式中的边框宽度和颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值