制作细线表格，我想应该是最基本的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. Qt KDChart编译

    最近开发中需要用到甘特图,感觉KDChart这个插件不错,在这里记录一下编译过程(其实很好编译,而且一次性就过了) 下载,kdchart-2.6.1-source,解压 打开src目录,用Qt Cre ...

  2. osg qt 三维模型加载

    osg::ref_ptr<osg::Node> OSG_Qt_::operateMatrix() { osg::ref_ptr<osg::Group> group = new ...

  3. 5.7版本mysql查询报错：com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException:...this is incompatible with sql_mode=only_full_group_by

    先瞧下日志: ### Error querying database. Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException ...

  4. linux上安装pycharm

    百度搜索pycharm 然后打开pycharm的官网 然后在官网首页点击down,下载linux版pycharm 上传到linux服务器.解压 然后再打开bin目录 执行:sh ./pycharm.s ...

  5. laravel容器类make方法解释

    容器类调用make方法时,如果没有已注册的key,那么会自动通过反射类实例化具体类 make /** * Resolve the given type from the container. * * ...

  6. 【ARM-Linux开发】如何使用opkg在RicoBoard上在线安装软件包

    类似于debian的apt-get,Redhat的yum类似,嵌入式Linux平台可以使用opkg实现在线安装软件包的功能,在我们提供的matrix文件系统中,已经包含了opkg工具,但是还没有配置一 ...

  7. C语言程序设计II—第十二周教学

    第十二周教学总结(13/5-19/5) 教学内容 本周的教学内容为:11.1 知识点:指针数组的概念.11.2 知识点:函数指针.11.3知识点:单链表的基本概念,链表节点的结构定义方法,以及单向链表 ...

  8. 计算属性和mathod的对比

    methods:定义函数      调用的是  函数名()      用一次则需要调用一次,效率低 computed:定义函数   调用的是   函数名      只调用一次,因此效率高

  9. [转帖]Oracle数据库lob大对象数据类型字段总结，值得收藏

    Oracle数据库lob大对象数据类型字段总结,值得收藏 原创 波波说运维 2019-07-11 00:02:00 https://www.toutiao.com/i67108943269703357 ...

  10. java--demo之猜拳游戏

    版本1:人机大战  基础随机出    用户键盘录入 package com.hainiu.demo; import java.util.Scanner; /* * 人机大战石头剪刀布 */ publi ...