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


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


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

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

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

注:

原文作者:祈澈姑娘技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。

公众号回复“1”,拉你进程序员技术讨论群.

如何去掉bootstrap table中表格样式中横线竖线的更多相关文章

  1. iview table 普通表格样式

    iview table 普通表格样式 https://run.iviewui.com/UvLFPMb0 <template> <table> <thead> < ...

  2. bootStrap table 和 JS 开发过程中遇到问题汇总

    1..bootStrap-table表头固定 在table定义的时候给高度属性就可以自动生成滚动条,并且固定表头[height: 220,] 2.为动态生成的DOM元素绑定事件 on("cl ...

  3. table(表格)中的标签和属性

    1.表格由 <table> 标签来定义.行( <tr> ),单元格(<td> ) 字母 td 指表格数据(table data),即数据单元格的内容.数据单元格可以 ...

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

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

  5. bootstrap table 自定义checkbox样式

    //css <style> .checkbox-custom { position: relative; padding: 0 15px 0 25px; margin-bottom: 7p ...

  6. Table Generator 表格样式生成代码

    <style type="text/css"> .tg {border-collapse:collapse;border-spacing:0;} .tg td{font ...

  7. bootstrap table 标题列重复

    使用bootstrap table生成表格,出现一个奇怪问题,标题列重复.查了一大堆资料,没有找到可以解决问题的. 以为是类库版本的问题,全部替换成了example中的引用,还是这个问题. 后来仔细查 ...

  8. bootstrap table使用及遇到的问题

    本人前端菜鸟一枚,最近使用bootstrap table实现表格,记录一下以便日后翻阅,废话不多说,先看效果图: 1.首先说下要实现该效果需要添加的css样式及所需的js文件,具体下载地址就不粘贴了( ...

  9. Bootstrap系列 -- 9. 表格

    一. Bootstrap 表格样式支持 Bootstrap提供了六种不同风格的样式支持,其中一个基础样式,4个附件样式,1个响应式设计样式 1. .table:基础表格 2. .table-strip ...

随机推荐

  1. SQL语句查询数据库所有表和所有字段的详细信息(包括表描述和字段描述)

    select (case then ddd.value else '' end ) as "表名(中文)" --如果表名相同就返回空 , (case then d.name els ...

  2. Tensorlfow学习笔记----collection

    本文来源:http://blog.csdn.net/u012436149/article/details/53894354 tensorflow  之  collection tensorflow的c ...

  3. PXE无人值守部署centos7.4操作系统

    1.基础环境: 镜像ISO文件名为:CentOS-7-x86_64-DVD-1804.iso 2.安装需要的软件包 yum install dhcp xinetd syslinux httpd tft ...

  4. du---是对文件和目录磁盘使用的空间查看

    du命令也是查看使用空间的,但是与df命令不同的是Linux du命令是对文件和目录磁盘使用的空间的查看,还是和df命令有一些区别的. 语法 du [选项][文件] 选项 -a或-all 显示目录中个 ...

  5. CentOS yum安装mcrypt详细图解教程

    CentOS yum安装mcrypt详细图解教程 在Linux的发行版CentOS 6.3 系统下,LAMP(Linux+Apache+Mysql+php)环境搭建好后发现PHPMyadmin提示 “ ...

  6. 洛谷——P2446 [SDOI2010]大陆争霸

    https://www.luogu.org/problem/show?pid=2446#sub 题目背景 在一个遥远的世界里有两个国家:位于大陆西端的杰森国和位于大陆东端的克里斯国.两个国家的人民分别 ...

  7. ThinkPHP数据分页Page.class.php

    获取分页类 ThinkPHP提供了数据分页的扩展类库Page,能够在http://www.thinkphp.cn/extend/241.html下载,或者下载官方的完整扩展包(http://www.t ...

  8. 整合struts2+spring+hibernate

     一.准备struts2+spring+hibernate所须要的jar包:        新建web项目并将jar包引入到project项目中. 二.搭建struts2环境        a.在 ...

  9. EularProject 48: 利用数组求和

    Problem 48 The series, 11+22+33+...+1010=10405071317. Find the last ten digits of the series, 11+22+ ...

  10. IOCP模型总结(总结回想)

    IOCP旧代码重提.近期一直在玩其它方面的东东.时不时回想一下,收益多多. IOCP(I/O Completion Port,I/O完毕port)是性能最好的一种I/O模型.它是应用程序使用线程池处理 ...