1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>流程表格</title>
7 <style>
8 table {
9 display: block;
10 }
11
12 tr {
13 display: block;
14 float: left;
15 }
16
17 td {
18 display: block;
19 border: #ccc solid 1px;
20 text-align: center;
21 height: 30px;
22 line-height: 30px;
23 width: 100px;
24 }
25 </style>
26 </head>
27
28 <body>
29 <table>
30 <tr>
31 <td>登记</td>
32 <td>张三</td>
33 <td>2019-01-01</td>
34 <td>15:14:23</td>
35 </tr>
36 <tr>
37 <td>接收</td>
38 <td>李四</td>
39 <td>2019-01-05</td>
40 <td>08:05:23</td>
41 </tr>
42 <tr>
43 <td>出货</td>
44 <td>王五</td>
45 <td>2019-01-06</td>
46 <td>14:14:23</td>
47 </tr>
48 </table>
49 </body>
50
51 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>流程表格</title>
7 <style>
8 .table {
9 display: block;
10 }
11
12 .table-row {
13 display: block;
14 float: left;
15 }
16
17 .table-cell {
18 display: block;
19 border: #ccc solid 1px;
20 text-align: center;
21 height: 30px;
22 line-height: 30px;
23 width: 100px;
24 }
25 </style>
26 </head>
27
28 <body>
29 <div class="table">
30 <div class="table-row">
31 <div class="table-cell">登记</div>
32 <div class="table-cell">张三</div>
33 <div class="table-cell">2019-01-01</div>
34 <div class="table-cell">15:14:23</div>
35 </div>
36 <div class="table-row">
37 <div class="table-cell">接收</div>
38 <div class="table-cell">李四</div>
39 <div class="table-cell">2019-01-05</div>
40 <div class="table-cell">08:05:23</div>
41 </div>
42 <div class="table-row">
43 <div class="table-cell">出货</div>
44 <div class="table-cell">王五</div>
45 <div class="table-cell">2019-01-06</div>
46 <div class="table-cell">14:14:23</div>
47 </div>
48 </div>
49 </body>
50
51 </html>
登记 |
张三 |
2019-01-01 |
15:14:23 |
接收 |
李四 |
2019-01-05 |
08:05:23 |
出货 |
王五 |
2019-01-06 |
14:14:23 |