修改之前,表格看上去比较拥挤,因为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. android对话框显示异常报错:You need to use a Theme.AppCompat theme (or descendant) with this activity.

    今天写android实验碰到到一个问题,在用AlertDialog.Builder类构建一个对话框之后,调用Builder.show()方法时抛出异常如下: - ::-/xyz.qlrr.sqlite ...

  2. Intersection between 2d conic in OpenCASCADE

    Intersection between 2d conic in OpenCASCADE eryar@163.com Abstract. OpenCASCADE provides the algori ...

  3. .net运行项目的几种形式

    1.通过配置IIS 2.通过VS运行项目 3.发布到测试服务器 不同于PHP的发布,直接把相关的类文件传入ftp即可. .net的发布是编译好dll文件,将dll文件传入即可. 比如改了某个文件,就把 ...

  4. solr简介

    Solr 是什么? Solr它是一种开放源码的.基于 Lucene Java 的搜索服务器,易于加入到 Web 应用程序中. Solr 提供了层面搜索(就是统计).命中醒目显示并且支持多种输出格式(包 ...

  5. javafx style and cssFile

    public class EffectTest extends Application { public static void main(String[] args) { launch(args); ...

  6. lunix 命令积累

    .修改文件的拥有者 chown 用户:用户 文件 .切换账号 su 账号 . 追踪路由信息 traceroute 主机名

  7. postgresql 不同数据库不同模式下的数据迁移

    编写不容易,转载请注明出处谢谢, 数据迁移 因为之前爬虫的时候,一部分数据并没有上传到服务器,在本地.本来用的就是postgresql,也没用多久,数据迁移的时候,也遇到了很多问题,第一次使pg_du ...

  8. Java第三方工具库/包汇总

    一.科学计算或矩阵运算库 科学计算包: JMathLib是一个用于计算复杂数学表达式并能够图形化显示计算结果的Java开源类库.它是Matlab.Octave.FreeMat.Scilab的一个克隆, ...

  9. NYOJ 927 The partial sum problem 【DFS】+【剪枝】

    The partial sum problem 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描写叙述 One day,Tom's girlfriend give him a ...

  10. POJ 3252 Round Numbers(组合数学)

    Round Numbers Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 10223   Accepted: 3726 De ...