<!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. SQL server 表信息查询

    一.查看所有表的行数select a.name as '表名',b.rows as '表数据行数'from sysobjects a inner join sysindexes bon a.id = ...

  2. 第二周Python学习笔记

    分支结构: ①  单分支结构: 非常简单,if 条件语句,如果为true 则输出结果.否则不输出结果 ②  二分支结构: 条件结果为true则执行语句1,否则就执行语句2 If <条件>: ...

  3. 【死磕 Spring】—– IOC 之解析Bean：解析 import 标签

    原文出自:http://cmsblogs.com 在博客[死磕Spring]----- IOC 之 注册 BeanDefinition中分析到,Spring 中有两种解析 Bean 的方式.如果根节点 ...

  4. C/C++中extern和static

    目录 1 extern概念 2 extern作用 2.1 变量声明 2.2 变量定义 2.3 声明和定义举例 3 为什么使用extern 4 怎么使用extern 4.1 基本数据类型定义变量 4.2 ...

  5. Python学习曲线

    经历长达近一个月的资源筛选过程终于结束,总共1.5T百度网盘的资源经过:去重.筛选.整理.归档之后一份粗略的Python学习曲线资源已经成型,虽然中间经历了很多坎坷,不过最终还是完成,猪哥也是第一时间 ...

  6. [Abp vNext 源码分析] - 文章目录

    一.简要介绍 ABP vNext 是 ABP 框架作者所发起的新项目,截止目前 (2019 年 2 月 18 日) 已经拥有 1400 多个 Star,最新版本号为 v 0.16.0 ,但还属于预览版 ...

  7. windows的80端口被占用时的处理方法

    1.利用jfinal极速开发时,显示异常,80端口被占用. 2.win+R输入cmd打开黑窗口. netstat -ano | findstr 3.发现进程被占用,输入以下指令停止http服务 net ...

  8. Python爬虫入门教程 43-100 百思不得姐APP数据-手机APP爬虫部分

    1. Python爬虫入门教程 爬取背景 2019年1月10日深夜,打开了百思不得姐APP,想了一下是否可以爬呢?不自觉的安装到了夜神模拟器里面.这个APP还是比较有名和有意思的. 下面是百思不得姐的 ...

  9. SpinnerViewPop【PopWindow样式（单选）、Dialog样式（单选+多选）的下拉菜单】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 对下拉菜单的文本区域和列表区域进行了封装.包括两种展现方式:popwindow(单选).dialog(单选+多选) 因为该封装需要在 ...

  10. 【面试】足够应付面试的Spring事务源码阅读梳理（建议珍藏）

    Starting from a joke 问:把大象放冰箱里,分几步? 答:三步啊,第一.把冰箱门打开,第二.把大象放进去,第三.把冰箱门带上. 问:实现Spring事务,分几步? 答:三步啊,第一. ...