<!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. Maven 基本的认识

    Maven 基本的认识 1. 什么是Maven? 在平时开发中,经常遇到某个jar包,我在代码层已经Import 和@Automation了,编译器还是提醒你某个jar包找不到,往往这时来个mvn i ...

  2. Java辅助类持续汇总~

    /** * 01 * 描述:List<String>集合去除重复数据 * [时间 2019年3月5日下午3:54:09 作者 陶攀峰] */ public static List<S ...

  3. SQLite新建数据库及txt文件（CSV文件）导入

    1.安装准备: Windows系统环境: 安装:SQLiteExpert  及 官网的SQLite tool  我们要用到其中的SQLite.exe       地址:https://www.sqli ...

  4. Redis内存模型(2)：存储细节

    1. 概述 先看一下执行set hellow world时,所涉及的数据模型: (1)dictEntry:Redis是Key-Value数据库,因此对每个键值对都会有一个dictEntry,里面存储了 ...

  5. Netty2：粘包/拆包问题与使用LineBasedFrameDecoder的解决方案

    什么是粘包.拆包 粘包.拆包是Socket编程中最常遇见的一个问题,本文来研究一下Netty是如何解决粘包.拆包的,首先我们从什么是粘包.拆包开始说起: TCP是个"流"协议,所谓 ...

  6. SpringBoot 项目在静态工具类中注入 RedisTemplate

    静态属性不能直接注入,可以通过其set方法进行注入.(注意生成的set方法需要去掉static). 在工具类里直接注入RedisTemplate,两种方法: (1)使用@Autowired priva ...

  7. Java数据结构和算法 - 递归

    三角数字 Q: 什么是三角数字? A: 据说一群在毕达哥拉斯领导下工作的古希腊的数学家,发现了在数学序列1,3,6,10,15,21,……中有一种奇特的联系.这个数列中的第N项是由第N-1项加N得到的 ...

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

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

  9. 【工利其器】必会工具之（三）systrace篇（1）官网翻译

    前言 Android 开发者官网中对systrace(Android System Trace)有专门的介绍,本篇文章作为systrace系列的开头,笔者先不做任何介绍,仅仅翻译一下官网的介绍.在后续 ...

  10. AppUtils【获取手机的信息和应用版本号、安装apk】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 一个获取设备的系统版本号.设备的型号.应用版本号code值.应用版本号name值.包名.是否更新.安装apk的工具类. 其实这个工具 ...