备案控制台
开发者社区 开发与运维 文章 正文

如何去掉bootstrap table中表格样式中横线竖线

2023-11-09 70
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 如何去掉bootstrap table中表格样式中横线竖线

修改之前，表格看上去比较拥挤，因为bootstrap table插件中自带斑马线表格样式，有横线和竖线分栏，现在我们不需要这些。


应UI设计的要求，要去掉中间的横线和竖线，使用了修改需求中一种简单粗暴的修改方法，打卡网页F12键，找到横线竖线所对应的位置，直接添加代码border:0px;测试成功。


返回编辑器，在css里面添加

.table>tbody>tr>td{
    border:0px;
    }

修改之后的效果，果然美观了很多，看起来不再那么的繁琐杂乱。

文章标签：
前端开发
关键词：
Bootstrap table
Bootstrap表格
Bootstrap样式
Bootstrap table表格
Bootstrap表格样式
祈澈菇凉
目录
相关文章
爱吃糖的范同学
|
1月前
|
前端开发
【Bootstrap】＜前端框架＞Bootstrap常用样式 - 排版
【1月更文挑战第17天】【Bootstrap】＜前端框架＞Bootstrap常用样式 - 排版
爱吃糖的范同学
72 1
祈澈菇凉
|
7月前
|
JSON 前端开发 数据格式
bootstrap table表格的点击详情按钮操作
bootstrap table表格的点击详情按钮操作
祈澈菇凉
60 1
六月的雨在钉钉
|
1月前
|
前端开发 容器
bootstrap table 设置自定义列宽
【5月更文挑战第4天】bootstrap table 设置自定义列宽
六月的雨在钉钉
258 1
香甜可口草莓蛋糕
|
1月前
|
前端开发
BootStrap 5 保姆级教程（三）：表格 & 图片
BootStrap 5 保姆级教程（三）：表格 & 图片
香甜可口草莓蛋糕
17 0
祈澈菇凉
|
7月前
|
前端开发 JavaScript
Bootstrap Table根据参数搜索功能
Bootstrap Table根据参数搜索功能
祈澈菇凉
65 0
a15034260562-24955
|
1月前
|
前端开发
bootstrap样式代码案例
bootstrap样式代码案例
a15034260562-24955
16 0
a15034260562-24955
|
1月前
|
前端开发 JavaScript 容器
bootstrap样式
bootstrap样式
a15034260562-24955
17 0
2019ab
|
1月前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
2019ab
59 0
Zh.晨光
|
1月前
|
前端开发 JavaScript 容器
BootStrap 组件和样式
BootStrap 组件和样式
Zh.晨光
47 0
祈澈菇凉
|
7月前
|
前端开发
bootstrap table点击修改按钮给弹框赋值
bootstrap table点击修改按钮给弹框赋值
祈澈菇凉
34 0