修改之前,表格看上去比较拥挤,因为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. 如何在Ubuntu14.04中创建Python虚拟环境

    在Ubuntu14.04中安装Python相对比较容易些,最简单的安装方法就是apt-get安装了,具体的教程可以戳这篇文章:在Ubuntu14.04中如何安装Python3和切换py2和py3环境. ...

  2. mysql not in用法

    select * from zan where uid not in(select uid from zan where zhongjiang !=0) group by uid order by r ...

  3. 【Uva 1252】Twenty Questions

    [Link]: [Description] 给你n个物体,每个物体都有m种属性; (每个物体的属性都能和别的物体的属性区别) 现在,你已知这n个物体; 然后让一个人心里想一个物体 你可以问这个人,这个 ...

  4. 排序(1)---------选择排序(C语言实现)

    选择排序的基本思想: 选择排序(Selection sort)是一种简单直观的排序算法. 它的工作原理例如以下.首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素 ...

  5. RTSP传输协议之Methods总结

    RTSP/1.0 200 OK Server: DSS/5.5.5 (Build/489.16; Platform/Linux; Release/Darwin; state/beta; ) Cseq: ...

  6. 湖南省第八届大学生计算机程序设计竞赛(A,B,C,E,F,I,J)

    A 三家人 Description 有三户人家共拥有一座花园,每户人家的太太均需帮忙整理花园.A 太太工作了5 天,B 太太则工作了4 天,才将花园整理完毕.C 太太因为正身怀六甲无法加入她们的行列, ...

  7. 2017国家集训队作业[agc004f]Namori

    2017国家集训队作业[agc004f]Namori 题意: 给你一颗树或环套树,树上有\(N\)个点,有\(M\)条边.一开始,树上的点都是白色,一次操作可以选择一条端点颜色相同的边,使它的端点颜色 ...

  8. touch---创建文件或更改文件日期

  9. 交换工资 SQL

  10. 从 QSplitter 中移除 QWidget(使用隐藏与显示,切换十分方便,不要真正销毁)

    Splitter 的函数中有addWidget,但是却没有removeWidget, 或者delete之类的功能,所以如果想删去或者暂时不显示其中的某些widget就要自己手动完成这个效果.方法一:取 ...