修改之前,表格看上去比较拥挤,因为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. Linux VNC客户端软件VNC Viewer | RealVNC

    Linux很多时候是作为服务器操作系统,如果是桌面系统通常情况会远程管理linux服务器,很多时候通过VNC进行远程管理,这个时候就要在客户端安装VNC客户端软件,VNC Viewer | RealV ...

  2. struts.xml配置action没用,任意href自动跳到主页,在action中print没用?????

    今晚弄了好久都搞不清楚,晕死我了. 上网找也没找到解决办法. 然后看了Build Path.好吧,有几个没用的jar包,remove之.我去,马上正常了,具体原因未知. 总结:删除jar包不代表Bui ...

  3. android应用开发-从设计到实现 3-9 Origami动态原型设计

    动态原型设计 动态的可交互原型产品,是产品经理和界面设计师向开发人员阐释自己设计的最高效工具. 开发人员不须要推測设计师要什么样的效果,照着原型产品做就好了. 非常多创业团队也发现了产品人的这个刚需, ...

  4. PHP 使用Apache 中的ab 測试站点的压力性能

    打开Apacheserver的安装路径(我用的是 WampServer),在bin文件夹中有一个ab.exe的可运行程序,它就是要介绍的压力測试工具. watermark/2/text/aHR0cDo ...

  5. c# for 和 foreach

    1给定长度 不需要计算长度的 for比foreach循环效率高 2 在不确定长度 或者计算长度有性能损耗的时候 用foreach比较方便 2336 循环语句是编程的基本语句,在C#中除了沿用C语言的循 ...

  6. C_深入(内存模型)

    01 数据类型: 为什么有数据类型? 现实生活中的数据太多而且大小形态不一. 数据类型与内存的关系: 数据类型的本质:创建变量的模具,是固定大小的别名. #include "stdio.h& ...

  7. 「HAOI2016」字符合并

    「HAOI2016」字符合并 题意: ​ 有一个长度为\(n\)的\(01\)串,你可以每次将相邻的\(k\)个字符合并,得到一个新的字符并获得一定分数.得到的新字符和分数由这\(k\)个字符确定.你 ...

  8. VMware虚拟机XP系统安装

    转载:http://jingyan.baidu.com/article/54b6b9c00e2f452d593b4762.html

  9. [翻译]魅族的M1 Note是十分廉价(dirt-cheap)的iphone5C增强版

    Meizu's M1 Note is a dirt-cheap iPhone 5c on steroids 魅族的M1 Note是十分廉价(dirt-cheap)的ihone5C增强版 While m ...

  10. 例说linux内核与应用数据通信(四):映射设备内核空间到用户态

    [版权声明:尊重原创,转载请保留出处:blog.csdn.net/shallnet.文章仅供学习交流,请勿用于商业用途]         一个进程的内存映象由以下几部分组成:代码段.数据段.BSS段和 ...