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

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. 单点登录(十)-----遇到问题-----cas启用mongodb验证方式报错com.mongodb.CommandFailureException---Authentication failed

    cas启用mongodb验证方式报错com.mongodb.CommandFailureException---Authentication failed. 完整报错信息: 二月 08, 2017 5 ...

  2. Android 程序架构: MVC、MVP、MVVM、Unidirectional、Clean...

    摘选自:GUI 应用程序架构的十年变迁:MVC.MVP.MVVM.Unidirectional.Cleanhttps://zhuanlan.zhihu.com/p/26799645 MV* in An ...

  3. Android Studio & eclipse 调试技巧

    如上图设置多个断点,开启调试.想跨断点移动到下一个断点,点击如下图1箭头,程序将运行一个断点到下一个断点之间需要执行的代码.如果后面代码没有断点,再次点击该按钮将会执行完程序.点击箭头2指向的按钮,可 ...

  4. 【数据结构】【CF1073D】 Berland Fair

    Description 给定 \(n\) 个商店,他们围成一个圆圈,按照顺时针从 \(1\) 到 \(n\) 编号.你有 \(T\) 元钱,从 \(1\) 号点开始按照顺时针方向走,每到一个商店,只要 ...

  5. 【Asp.net入门4-01】基本开发工具

  6. SQL Server 2008定期的备份数据库--差异+完整

    https://www.cnblogs.com/l1pe1/p/7885207.html https://www.cnblogs.com/tylerflyn/p/8051398.html https: ...

  7. numpy取反操作符和Boolean类型

    numpy~运算符和Boolean类型变量 觉得有用的话,欢迎一起讨论相互学习~Follow Me numpy中取反运算符~可以将Boolean类型值取反,这在使用boolean类型数组选择数组中固定 ...

  8. Java获取精确到毫秒的时间戳

    import java.util.Date; public class Timestamp { /** 获取精确到毫秒的时间戳 * @param date * @return **/ public s ...

  9. iScroll使用方法

    最基本的iScroll使用结构 <div id="wrapper"> <ul> <li></li> ..... </ul> ...

  10. Python入门系列教程(二)字符串

    字符串 1.字符串输出 name = 'xiaoming' print("姓名:%s"%name) 2.字符串输入 userName = raw_input('请输入用户名:') ...