<!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. windows下nginx的安装及使用

    安装过程比较简单 1.下载nginx http://nginx.org/en/download.html 下载稳定版本,以nginx/Windows-1.14.2为例,直接下载 nginx-1.14. ...

  2. #ifndef, #define, #endif 作用

    #ifndef, #define, #endif 作用 https://www.cnblogs.com/challenger-vip/p/3386819.html

  3. Luogu P5279 [ZJOI2019]麻将

    ZJOI2019神题,间接送我退役的神题233 考场上由于T2写挂去写爆搜的时候已经没多少时间了,所以就写挂了233 这里不多废话直接开始讲正解吧,我们把算法分成两部分 1.建一个"胡牌自动 ...

  4. Java枚举储存的一种索引实现方式

    首先引入guava包(一个进行代码校验的工具类): <dependency> <groupId>com.google.guava</groupId> <art ...

  5. SUSE12SP3-Zookeeper安装

    直接使用root账号 1.zookeeper安装 将zookeeper-3.4.13.tar.gz安装包放置指定目录 sudo tar -zxvf zookeeper-3.4.13.tar.gz -C ...

  6. 使用前端技术和MySQL+PHP制作自己的一个个人博客网站

    源代码地址:https://github.com/YauCheun/BlogCode 我的博客网站地址:http://www.yublog.fun/ 制作前景: 想拥有一个自己独自开发的一个小型博客网 ...

  7. mysql优化一之查询优化

    这一篇笔记的mysql优化是注重于查询优化,根据mysql的执行情况,判断mysql什么时候需要优化,关于数据库开始阶段的数据库逻辑.物理结构的设计结构优化不是本文重点,下次再谈 查看mysql语句的 ...

  8. 团队选题报告（bull beer）

    一.团队成员及分工 团队名称:bull beer 团队成员: 黄文东:选题报告word撰写 沈培:原型设计,博客撰写,ppt制作 邓泽中:住院 刘帅:查找相关资料 二.选题报告内容 项目名称:学费管理 ...

  9. qml demo分析(abstractitemmodel-数据分离)

    一.概述 qt5之后qml也可以被用于桌面程序开发,今天我就拿出qt demo中的一个qml示例程序进行分析.这个demo主要是展示了qml数据和展示分离的使用方式,qml只专注于快速高效的绘制界面, ...

  10. 如何在ASP.NET Core程序启动时运行异步任务（1）

    原文:Running async tasks on app startup in ASP.NET Core (Part 1) 作者:Andrew Lock 译者:Lamond Lu 背景 当我们做项目 ...