页面制作中最头痛的,表格的边框算是其一了。一不小心就会出现双重线

border-collapse属性 很好的解决了纠结了很久的问题

.table{border: 1px solid #ccc;border-collapse: collapse; width:80%;}.table th,.table td{border: 1px solid #ccc;padding: 10px;}

<table class="table">
  <thead>
    <tr>
      <th>id</th>
      <th>作者</th>
      <th>书名</th>
      <th>内容</th>
      <th>分类</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>唐家三少</td>
      <td>斗破苍穹</td>
      <td>斗破苍穹斗破苍穹</td>
      <td>玄幻</td>
    </tr>
    <tr class="success">
      <td>001</td>
      <td>唐家三少</td>
      <td>斗破苍穹</td>
      <td>斗破苍穹斗破苍穹</td>
      <td>玄幻</td>
    </tr>
  </tbody>
</table>

运行后的样子:

表格中border-collapse属性的更多相关文章

  1. css中的border-collapse属性如何设置表格边框线?(代码示例)

    css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...

  2. oracle数据库查询日期sql语句(范例)、向已经建好的表格中添加一列属性并向该列添加数值、删除某一列的数据(一整列)

    先列上我的数据库表格: c_date(Date格式)     date_type(String格式) 2011-01-01                   0 2012-03-07         ...

  3. 五十六、SAP中LVC表格的常用布局属性LVC_S_LAYO

    一.LVC_S_LAYO为表格常用的布局属性,包括网格线,宽度自适应,隐藏主键等 二.我们来对比使用前和使用后的表格,这个原始布局风格的表格 三.这个是设置了相关属性的表格

  4. 细说CSS中的display属性

    相信大部分奋战在前端的,尤其在前端攻城的过程中,有一种越陷越深的感觉,不错,一如前端深似海,从此妹子是浮云啊,前端上手容易,深入难啊!下面我就CSS中的display属性讲下我自己所积累的,与大家共享 ...

  5. js中style的属性

    下面这些属性都是通过js的style来设置css.只是整理了一部分,详细的可以参考相应的学习网站,不好的地方欢迎大家拍砖. alignContent :"" 属性在弹性容器内的各项 ...

  6. html表格中的tr td th用法

      表格是html中经常使用到的,简单的使用可能很多人都没问题,但是更深入的了解的人恐怕不多,下面我们先来看一下如何使用. <table>是<tr>的上层标签 <tr&g ...

  7. (转)用JS实现表格中隔行显示不同颜色

    用JS实现表格中隔行显示不同颜色 第一种: <style> tr{bgColor:expression(     this.bgColor=((this.rowIndex)%2==0 )? ...

  8. js如何实现动态的在表格中添加和删除行?(两种方法)

    js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...

  9. js如何实现动态在表格中添加标题和去掉标题?

    js如何实现动态在表格中添加标题和去掉标题? 一.总结 1.通过table标签的createCaption(),deleteCaption()方法实现. document.getElementById ...

  10. table表格整体居中 和 table表格中各行各列内容居中

    1.table表格整个居中<div style="text-align: center;"> <table border="1" style= ...

随机推荐

  1. 【BZOJ4709】【Jsoi2011】柠檬

    Description 传送门 题意简述:将序列划分成任意多段,从每一段选出一个数\(x\),获得\(在这一段出现的次数x*(x在这一段出现的次数)\)的贡献.求总贡献最大值. Solution ​ ...

  2. Linux及安全实践二——模块

    Linux及安全实践二--模块 一.模块的编译.生成.测试.删除 1.编写模块代码 编写:gedit 3.c 2.编写Makefile obj-m :这个变量是指定你要声称哪些模块模块的格式为 obj ...

  3. Javascript/jQuery关于JSON或数组集合的几种循环方法

    JavaScript遍历JSON或数组集合: /** * 根据json数据生成option树形控件 * 如果有children节点则自动生成树形数据 * @param {JSON} data * @p ...

  4. Android Studio 创建/打开项目时一直处于Building“project name”Gradle project info 的解决

    最近发现新版的AS,IDEA毛病不断,而且gradle的更新又给墙了,无奈啊! 进入类似如下的目录,发现如果没有对应的gradle解压文件,则在gradle官网下载完整压缩包,放入类似55xxxx串号 ...

  5. bzoj3672: [Noi2014]购票(树形DP+斜率优化+可持久化凸包)

    这题的加强版,多了一个$l_i$的限制,少了一个$p_i$的单调性,难了好多... 首先有方程$f(i)=min\{f(j)+(dep_i-dep_j)*p_i+q_i\}$ $\frac {f(j) ...

  6. CF17E Palisection——优秀的综合计数题

    题意翻译 给定一个长度为n的小写字母串.问你有多少对相交的回文子 串(包含也算相交) . 输入格式 第一行是字符串长度n(1<=n<=2*10^6),第二行字符串 输出格式 相交的回文子串 ...

  7. D. Arpa and a list of numbers Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017)

    http://codeforces.com/contest/851/problem/D 分区间操作 #include <cstdio> #include <cstdlib> # ...

  8. Codeforces Round #426 (Div. 2) D 线段树优化dp

    D. The Bakery time limit per test 2.5 seconds memory limit per test 256 megabytes input standard inp ...

  9. python 冒泡法 排序

    冒泡排序 冒泡排序(Bubble Sort):重复地遍历要排序的数列,依次比较两个元素,如果他们的顺序不符就把他们交换过来.就像气泡一样,需要排序的元素通过比较.交换位置,一点一点浮到对应的位置. 个 ...

  10. Docker多主机网络 OpenvSwitch

    一.Open vSwitch    Open vSwitch(以下简称为OVS),英文全称:OpenVirtual Switch,顾名思义,Open vSwitch就是开放虚拟交换.我们可以把他理解成 ...