制作细线表格，我想应该是最基本的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. SQL-W3School-函数：SQL MID() 函数

    ylbtech-SQL-W3School-函数:SQL MID() 函数 1.返回顶部 1. MID() 函数 MID 函数用于从文本字段中提取字符. SQL MID() 语法 SELECT MID( ...

  2. Ionic4.x 中自定义公共模块

    1.创建公共模块以及组件 ionic g module module/slide ionic g component module/slide 2.公共模块 slide.module.ts 中暴露对应 ...

  3. 自定义ObjectAnimator属性实现

    package com.loaderman.customviewdemo; import android.animation.ObjectAnimator; import android.graphi ...

  4. PHP松散比较与严格比较的区别详解

    在PHP中相等的比较有两种,松散比较和严格比较,当使用松散比较时,如果进行比较的两个操作数类型不同,那么会对操作数进行适当的类型转换,如果转换后的值相同则认为两个操作数相等.而使用严格比较时,如果两个 ...

  5. html页面js响应回车

    代码示例: document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.a ...

  6. 多线程，线程池与BeginInvoke()

    在WinForm中,很多情况下需要用到多线程,下面我来简单介绍一下多线程的基本用法. 1.线程.   (1)线程的初始化  Thread t = new Thread(new ThreadStart( ...

  7. Linux清除痕迹

    Linux清除痕迹 第一种方法: 在退出会话前直接执行: #history -r 清除当前会话的命令历史记录 第二种方法: 在vim中执行自己不想让别人看到的命令 随便用vim打开一个文件 :set ...

  8. iOS-UITabbar自定义

    [self createCustomTabBar]; -(void)createCustomTabBar{    //创建一个UIImageView,作为底图    UIImageView *bgVi ...

  9. IdentityServer4学习笔记汇总(实现传送门在底部)

    前言 互联网时代,对信息和资源的保护越发苛刻,在所有应用中授权和认证是必不可少缺少的一部分.如果一个应用没有授权和认证那么这个应用就是不完整或者说不安全的应用.在.Net平台给我们提供了一套完整的授权 ...

  10. Mariadb/Mysql命令行常用命令

    一.初始化等 1.登陆数据库方法    mysql -u 用户名 -p 用户密码 2.修改root及用户密码 use mysql; update user set password=password( ...