制作细线表格，我想应该是最基本的css知识了，记录下来巩固下。

推荐：

  1. table{
  2.     border-collapse:collapse;
  3.     border: 1px solid #000000;
  4. }  
  5.  
  6. td{
  7.     border-collapse:collapse;
  8.     border: 1px solid #000000;
  9. }

示例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Css制作table细线表格</title>
  6.     <style type="text/css">
  7.        .table {
  8.             border: 1px solid #ddd;
  9.             border-collapse: collapse;
  10.         }
  11.  
  12.         .table thead tr th,
  13.         .table tbody tr td {
  14.             padding: 8px 12px;
  15.             text-align: center;
  16.             color: #333;
  17.             border: 1px solid #ddd;
  18.             border-collapse: collapse;
  19.             background-color: #fff;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <table class="table" cellspacing="0" cellpadding="0">
  25.     <thead>
  26.         <th>编号</th>
  27.         <th>姓名</th>
  28.         <th>性别</th>
  29.         <th>电话号码</th>
  30.         <th>生日</th>
  31.     </thead>
  32.     <tbody>
  33.         <tr><td>1</td><td>coco</td><td>男</td><td>12345678888</td><td>2018-04-11 00:00:00</td></tr>
  34.         <tr><td>2</td><td>cici</td><td>男</td><td>13688889999</td><td>2018-04-11 00:00:00</td></tr>
  35.         <tr><td>3</td><td>tom</td><td>男</td><td>13656565656</td><td>2018-04-11 00:00:00</td></tr>
  36.     </tbody>
  37. </table>
  38. </body>
  39. </html>

效果图：

Css制作table细线表格的更多相关文章

  1. 利用CSS生成精美细线Table表格

    精美的表格是前端开发用到的一个组件,很多时候我们利用复杂的页面style代码,来生成这样的表格,造成了页面的修改性和可读性都非常差.这里推荐直接使用css来产生一个细线表格. 使用方法也很简单: 第一 ...

  2. html制作细线表格

    关于这个细线表格的制作方法,百度一下可能就会有答案告诉你设置这几个值:给table设置border="0" cellspacing="1" bgcolor=&q ...

  3. 基于CSS属性display:table的表格布局的使用

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...

  4. CSS Table（表格）

    CSS Table(表格) 一.表格边框 border 指定CSS表格边框,使用border属性. 下面的例子指定了一个表格的Th和TD元素的黑色边框: table, th, td { border: ...

  5. 初探css -11 Table表格

    CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkiste Maria Anders Germany Bergl ...

  6. [转]DIV+CSS和TABLE的区别

    现在全国大大小小的网站都在搞一场技术“革命”,就是所谓“网站重构”说简单点就是DIV+CSS进行网站制作.用DIV+CSS代替传统的Table制作框架和美化页面.百度搜索优化 在重构之前,肯定要了解为 ...

  7. CSS制作图片水平垂直居中

    所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...

  8. CSS制作水平垂直居中对齐

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...

  9. Html细线表格的实现 打印边框设置

    在网页制作中,我们常常会使用到表格,表格使得需要表达的信息更清楚,明了. <table border="1" cellspacing="0" border ...

随机推荐

  1. Web前端接入人机识别验证码---腾讯防水墙

    Web前端接入 1. 准备AppID 验证码接入需要先在管理后台中注册获取APPID和APPSECRET,注册步骤请参考 快速开始 2. 快速接入步骤 1.在Head的标签内最后加入以下代码引入验证J ...

  2. angular绑定数据

    Angular 中使用{{}}绑定业务逻辑里面定义的数据 <h1> Welcome to {{ title }}! /*引入title*/ </h1> export class ...

  3. 让群辉支持DTS音轨

    让群晖Video Station支持DTS音轨的方法原因:因版权问题,群晖Video Station默认不支持DTS音轨,因此默认不能播放使用DTS音轨的影片. 网上搜到好多解决办法,通常是让添加源h ...

  4. osg::Texture2D 贴纹理

    #ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include<iostream> #include <osgV ...

  5. iOS compile sources问题

    以前xcode compile sources 这里是自动生成的,升级到新版本之后,我删掉这里的列表,就没法生成了.导致项目无法运行. 解决方法就是:自己手动添加.h文件

  6. LODOP打印超文本字符串拼接1 固定表格填充数值

    前面的博文:Lodop打印控件传入css样式.看是否传入正确样式.Lodop打印如何隐藏table某一列,Lodop传入的样式可以不是页面本身的css样式,传入什么打印什么,此外,数据也是,超文本打印 ...

  7. CentOS 7 vi详解

    vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的任何版本,vi编辑器是完全相 ...

  8. 无权限安装vim8

    本文介绍Ubuntu14.04在没有sudo权限的情况下安装vim8 1.默认vim版本为7.3 $ vim --versionVIM - Vi IMproved 7.3 (2010 Aug 15, ...

  9. Vue 中 css scoped 样式穿透 ( stylus[>>>] / sass / less[/deep/] )

    scoped看起来很好用,当时在Vue项目中,当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖.这时我们 ...

  10. 多年经验【Parallels Desktop14.0.1 永久激活 】版 推荐苹果mac 虚拟机pmg序列号

    parallels desktop 14 mac 激活码          parallels 13免费密钥 parallels desktop 14 激活码 很多用 MAC 的朋友发现平时离不开 W ...