制作细线表格，我想应该是最基本的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. Java 数组元素逆序Reverse的三种方式

    Java 数组元素逆序Reverse的三种方式   本文链接:https://blog.csdn.net/xHibiki/article/details/82930521 题目 代码实现 说明 int ...

  2. VM12_pro+Ubuntu16_64+Qt5.12.2环境搭建

    1.准备软件[已经存网盘] 2.安装Vm 3.安装Ubuntu 4.进入linux,修改Qt安装包权限 5.运行Qt 6.第五步会弹出Qt安装的界面,默认安装就行了 7.修改环境变量 sudo ged ...

  3. Elasticsearch 7.x文档基本操作（CRUD）

    官方文档:https://www.elastic.co/guide/en/elasticsearch/reference/current/docs.html 1.添加文档 1.1.指定文档ID PUT ...

  4. php上传超大文件

    1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...

  5. POPUP_GET_VALUES 金额字段不可编辑

    转自:https://blog.csdn.net/huanglin6/article/details/102733845 当在POPUP_GET_VALUES函数中参考的字段是个货币或者金额字段的话, ...

  6. 【Leetcode_easy】747. Largest Number At Least Twice of Others

    problem 747. Largest Number At Least Twice of Others 题意: solution1: class Solution { public: int dom ...

  7. Python源码编译安装，supervisor配置管理

    apt-get remove 会删除软件包而保留软件的配置文件 apt-get purge 会同时清除软件包和软件的配置文件 virtualenv -p /usr/local/bin/python3. ...

  8. linux一行命令查杀进程

    https://blog.csdn.net/primeprime/article/details/52415273 ps -efww | grep -w 'helloworld' | grep -v ...

  9. Win 7 环境上，ThingsBoard安装及启动

    一.参考官方网址进行Thingsboard的下载与安装, 官方教程https://thingsboard.io/docs/user-guide/install/windows/#step-2-thin ...

  10. docker中使用Mysql8+phpmyadmin

    现在基本装这套都用docker了,有一些小坑在里面,简单说一下. 运行mysql比较简单,参考mysql⭐Docker Official Images,需要注意不要忘记暴露端口给phpmyadmin用 ...