<!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. Oracle 18c 数据库中scott用户不存在的解决方法

    Oracle 18c 数据库中scott用户不存在的解决方法 注:该文为转载 上面标题可直接跳转 原文地址:http://www.cnblogs.com/zangdalei/p/5482732.htm ...

  2. python3 树莓派 + usb摄像头 做颜色识别 二维码识别

    今天又啥也没干 我完蛋了哦  就是没办法沉下心来,咋办....还是先来条NLP吧.. 七,凡事必有至少三个解决方法 对事情只有一个方法的人,必陷入困境,因为别无选择. 对事情有两个方法的人也陷入困境, ...

  3. 好程序员web前端分享CSS基础篇

    学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML.CSS注释 ...

  4. JNI实战（四）：C 调用 Java

    在前面我们讲了一下如何使用Java调用C,本文我们讲一下如何使用JNI提供的接口来反射得到Java方法进行调用. 主要步骤如下: FindClass (找到Java层的类) GetMethodID / ...

  5. python进程和线程（五）

    python的进程 由于GIL的存在,python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程.Python提供了非常好用的多进程包m ...

  6. 【TensorFlow篇】--Tensorflow框架实现SoftMax模型识别手写数字集

    一.前述 本文讲述用Tensorflow框架实现SoftMax模型识别手写数字集,来实现多分类. 同时对模型的保存和恢复做下示例. 二.具体原理 代码一:实现代码 #!/usr/bin/python ...

  7. Navicat 导出sql问题

    楼主最近碰到一个问题: 使用Navicat建立数据模型的时候使用导出sql功能导出的sql脚本放在sqlserver中执行失败,表创建成功了,但是我在Navicat中写的表注释和字段注释都没有成功, ...

  8. MATLAB程序：用FCM分割脑图像

    MATLAB程序:用FCM分割脑图像 作者:凯鲁嘎吉 - 博客园http://www.cnblogs.com/kailugaji/ 脑图像基础知识请看:脑图像:FCM算法介绍请看:聚类——FCM:数据 ...

  9. DSAPI实现简单的透明窗体

    代码 Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load Dim B As New Bitmap( ...

  10. [转]AI+RPA 融合更智能

    本文转自:https://www.jianshu.com/p/cf25b3dfc0f0 前面已经分析过多次RPA的本质,可以参考 [脱下外衣],看看RPA机器人到底是什么?     哪些AI相关应用技 ...