使用原生div制作table表格

在移动端中使用vxe-table当有横屏功能时，在安卓使用时滑动方向出现错误无法根据横屏后的滑动。
此时手写原生div制作table表格

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tabletitle>
    <style>
        body {
            margin: 0;
        }
        .fixedTHead {
            position: sticky;
            top: 0;
            z-index: 2;
            border-bottom: 1px solid #ddd;
        }
        .fixedTHead .td {
            font-weight: bold;
        }
        .fixedLeft {
            position: sticky;
            left: 0;
        }
        .table-group {
            width: 100vw;
            height: 100vh;
            overflow: auto;

        }
        .table {
            width: 1200px;
            display: flex;
            flex-direction: column;
        }
        .tr {
            display: flex;
        }
        .td,.th {
            background-color: #fff;
            text-align: center;
            padding: 10px;
            font-size: 24px;
        }
        .flex1 {
            flex: 1;
        }
        .flex2 {
            flex: 1
        }
        .flex3{
            flex: 2;
        }
        .flex4 {
            flex: 5;
        }
        .flex5 {
            flex: 2;
        }
    style>
head>
<body>
    <div class="table-group">
        <div class="table">
            <div class="tr fixedTHead">
                <div class="td flex1 fixedLeft">IDdiv>
                <div class="td flex2">名称div>
                <div class="td flex3">联系方式div>
                <div class="td flex4">地址div>
                <div class="td flex5">注册时间div>
            div>
            <div class="tbody" id="body1">

            div>
        div>
    div>
body>
<script>
    document.getElementById('body1').innerHTML = new Array(60).fill({
        id: 1,
        name: '章三',
        phone: '199****9999',
        address: 'xx省xx市xx区xx街道xx小区xx栋xx号',
        createTime: '2020-02-22'
    }).map((v, i) => {
        return `
            ${i + 1}
            ${v.name}
            ${v.phone}
            ${v.address}
            ${v.createTime}
        `
    }).join('')
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

相关阅读:
【文件编码转换】将GBK编码项目转为UTF-8编码项目
观察者模式
C# 第二章『基础语法』◆第3节：while和do...while循环语句
保险从业人员有RFP理财规划师证的优势有哪些？
LCD1602指定位置显示字符串-详细版
Android学习笔记 78. 输入控件
系列六、Mybatis的一级缓存
【CSAPP】计算机系统知识点笔记（新国立NUS课程，中文版）
什么是强制缓存？什么是协商缓存？cache
机器学习---构建和训练一个简单的二分类神经网络模型并对结果进行可视化

原文地址：https://blog.csdn.net/weixin_43240445/article/details/128149440