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

推荐：

table{

    border-collapse:collapse;

    border: 1px solid #000000;

}  

td{

    border-collapse:collapse;

    border: 1px solid #000000;

}

示例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Css制作table细线表格</title>

    <style type="text/css">

       .table {

            border: 1px solid #ddd;

            border-collapse: collapse;

        }

        .table thead tr th,

        .table tbody tr td {

            padding: 8px 12px;

            text-align: center;

            color: #333;

            border: 1px solid #ddd;

            border-collapse: collapse;

            background-color: #fff;

        }

    </style>

</head>

<body>

    <table class="table" cellspacing="0" cellpadding="0">

    <thead>

        <th>编号</th>

        <th>姓名</th>

        <th>性别</th>

        <th>电话号码</th>

        <th>生日</th>

    </thead>

    <tbody>

        <tr><td>1</td><td>coco</td><td>男</td><td>12345678888</td><td>2018-04-11 00:00:00</td></tr>

        <tr><td>2</td><td>cici</td><td>男</td><td>13688889999</td><td>2018-04-11 00:00:00</td></tr>

        <tr><td>3</td><td>tom</td><td>男</td><td>13656565656</td><td>2018-04-11 00:00:00</td></tr>

    </tbody>

</table>

</body>

</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. leetcode 143. Reorder List 、86. Partition List

    143. Reorder List https://www.cnblogs.com/grandyang/p/4254860.html 先将list的前半段和后半段分开,然后后半段进行逆序,然后再连接 ...

  2. java说明文档制作

    A:对工具类加入文档注释 B:通过javadoc命令生成说明书 * @author(提取作者内容) * @version(提取版本内容) * javadoc -d 指定的文件目录 -author -v ...

  3. Qt自定义类重写 copy

    PtsData PtsData::copy(const PtsData &ptsData) { PtsData ptsData1; ptsData1.data_b = ptsData.data ...

  4. 一百四十五：CMS系统之帖子加精和取消加精

    模型 class HighlightPostModel(db.Model): """ 帖子加精信息 """ __tablename__ = ...

  5. topcoder srm 633 div1

    problem1 link 如果两个循环之内可以跳完,那么我们只要让这些步数之内的数字组成两个数字$p,q,p\leq q$,使得$p,q,x$组成三角形即可($p+q\geq x,p+x\geq q ...

  6. JSONP实现Ajax跨域请求

    前言 由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...

  7. win7下安装IIS7

    在Windows 7下如何安装IIS7,以及IIS7在安装过程中的一些需要注意的设置,以及在IIS7下配置ASP的正确方法. 在Windows 7下面IIS7的安装方法: 一.进入Windows 7的 ...

  8. .net mvc网站集成adfs(ws-fed协议)

    网站地址(本地开发测试):https://localhost:9000 第一步,adfs配置 配置要声明颁发策略(adfs要发送给网站的声明) 选择刚添加的依赖方信任,编辑颁发策略 配置完成 第二步, ...

  9. Flutter TextField 文本输入框的基本属性及详解

    TextField 文本输入框 源码分析: const TextField({ Key key, this.controller, // 控制正在编辑文本 this.focusNode, // 获取键 ...

  10. Go之接口interface(1)

    1. 什么是interface在此之前,我们遇到的都是具体的类型,比如数字类型.切片类型等等.对于这些具体的类型,我们总是能知道它是什么.可以利用它来做什么,比如对于一个数字类型,我们知道可以对其进行 ...