<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>流程表格</title>

     <style>

     table {

         display: block;

     }

     tr {

         display: block;

         float: left;

     }

     td {

         display: block;

         border: #ccc solid 1px;

         text-align: center;

         height: 30px;

         line-height: 30px;

         width: 100px;

     }

     </style>

 </head>

 <body>

     <table>

         <tr>

             <td>登记</td>

             <td>张三</td>

             <td>2019-01-01</td>

             <td>15:14:23</td>

         </tr>

         <tr>

             <td>接收</td>

             <td>李四</td>

             <td>2019-01-05</td>

             <td>08:05:23</td>

         </tr>

         <tr>

             <td>出货</td>

             <td>王五</td>

             <td>2019-01-06</td>

             <td>14:14:23</td>

         </tr>

     </table>

 </body>

 </html>


 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>流程表格</title>

     <style>

     .table {

         display: block;

     }

     .table-row {

         display: block;

         float: left;

     }

     .table-cell {

         display: block;

         border: #ccc solid 1px;

         text-align: center;

         height: 30px;

         line-height: 30px;

         width: 100px;

     }

     </style>

 </head>

 <body>

     <div class="table">

         <div class="table-row">

             <div class="table-cell">登记</div>

             <div class="table-cell">张三</div>

             <div class="table-cell">2019-01-01</div>

             <div class="table-cell">15:14:23</div>

         </div>

         <div class="table-row">

             <div class="table-cell">接收</div>

             <div class="table-cell">李四</div>

             <div class="table-cell">2019-01-05</div>

             <div class="table-cell">08:05:23</div>

         </div>

         <div class="table-row">

             <div class="table-cell">出货</div>

             <div class="table-cell">王五</div>

             <div class="table-cell">2019-01-06</div>

             <div class="table-cell">14:14:23</div>

         </div>

     </div>

 </body>

 </html>

登记 张三 2019-01-01 15:14:23
接收 李四 2019-01-05 08:05:23
出货 王五 2019-01-06 14:14:23

记录Html+Css流程表格的更多相关文章

  1. CSS控制表格（table）样式

    CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}

  2. 四个好看的CSS样式表格

    文章来源 http://www.cnphp6.com/archives/58020 1. 单像素边框CSS表格 这是一个非经常常使用的表格样式. 源码: 2. 带背景图的CSS样式表格 和上面差点儿相 ...

  3. 常用的四种CSS样式表格

    1. 单像素边框CSS表格 这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-fa ...

  4. 巧妙使用div+css模拟表格对角线

    首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...

  5. 问题：table 可否实现对角线；结果：用div+css模拟表格对角线

    首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...

  6. CSS控制表格嵌套

    网页设计应用中,当我们不能完全放弃表格的使用时,为了达到预期的效果,不免要用到表格嵌套(特别是多层嵌套)方式来进行布局.可能很多同仁都遇到过这样的问题,为了达到显示效果要为每一个(每一层)的表格写不同 ...

  7. 学习笔记 第九章 使用CSS美化表格

    第9章  使用CSS美化表格 学习重点 正确使用表格标签: 设置表格和单元格属性: 设计表格的CSS样式. 9.1 表格的基本结构 表格由行.列.单元格3部分组成,单元格时行与列交叉的部分. 在HTM ...

  8. css折叠表格

    1.html <div class="custom-fold-table"> <table cellpadding="0" cellspaci ...

  9. html table 美化-html如何用css美化表格

    html用css美化表格的方法:首先创建一个HTML示例文件:然后在body中创建table表格:最后通过style标签给表格添加css样式即可. 代码 下面通过示例来看看. /*表格样式*/ tab ...

随机推荐

  1. postgreSQL 玩转josnb (长期更新)

    json和jsonb的操作符 jsonb额外操作符 json创建函数 json处理函数 函数 返回类型 描述 示例 结果 json_array_length(json) jsonb_array_len ...

  2. “.Net 社区大会”(dotnetConf) 2018 Day 1 主题演讲

    Miguel de Icaza.Scott Hunter.Mads Torgersen三位大咖给大家带来了 .NET Core ,C# 以及 Xamarin的精彩内容: 6月份已经发布了.NET Co ...

  3. 在离线环境中安装Visual Stuido 2017

    在离线环境中安装Visual Stuido 2017 0x00 写在前面的废话 因为工作上大多数都是在离线环境中进行的,进出离线环境很麻烦,所以之前很长一段时间都在使用VS2010.后来尝试换了VS2 ...

  4. 【RL-TCPnet网络教程】第41章 HTTP超文本传输协议基础知识

    第41章      HTTP超文本传输协议基础知识 本章节为大家讲解HTTP(HyperText Transfer Protocol,超文本传输协议),从本章节开始,正式进入嵌入式Web的设计和学习. ...

  5. GROUP BY你都不会！ROLLUP，CUBE，GROUPPING详解

    Group By Group By 谁不会啊?这不是最简单的吗?越是简单的东西,我们越会忽略掉他,因为我们不愿意再去深入了解它. 1 小时 SQL 极速入门(一) 1 小时 SQL 极速入门(二) 1 ...

  6. C#冒泡排序算法（简单好理解）

    我对冒泡排序算法的理解: 把最大的往后,从最后一个与前一个对比,然后互换位置,直到全部换好. 目标:从小到大排序 源代码如下: namespace net冒泡排序{ class Program { s ...

  7. 仓储repository概念

    1.为什么要用仓储?(仓储有什么用) 1.1 解耦 为了解耦领域层与数据映射层的关系. 1.2 管理增删查改 仓储模式最大的优点就是所有的数据访问首先是通过仓库的,对仓库的增删改都不会立即提交到数据库 ...

  8. C/C++性能测试工具GNU gprof

    代码剖析(Code profiling)程序员在优化软件性能时要注意应尽量优化软件中被频繁调用的部分,这样才能对程序进行有效优化.使用真实的数据,精确的分析应用程序在时间上的花费的行为就成为_代码剖析 ...

  9. Linux 网络命令必知必会之 tcpdump，一份完整的抓包指南请查收！

    目录 01 简介 02 tcpdump 命令选项 03 过滤器 04 常用操作 4.1 抓取某主机的数据包 4.2 抓取某端口的数据包 4.3 抓取某网络(网段)的数据包 4.4 抓取某协议的数据包 ...

  10. Python + PyQt5 实现美剧爬虫可视工具（二）

    美剧<权力的游戏>终于开播最后一季了,在上周写了个简单的可视化美剧的爬虫软件来爬取美剧,链接:https://www.cnblogs.com/weijiutao/p/10614694.ht ...