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 |