表头左右滑动表体上下滑动

关于移动端表格相关的笔记。
    首先我要说的是不同设备的兼容性问题，这主要是关于自适应的问题。iPad Pro是一个神奇的设备 很多东西到上面就会变成你不想看见的样子。
那么引入以下代码可能可以解决你遇到的问题，包括以下要说的表格的自适应问题。
        <script>
            /(iPhone|iPad|iPhone OS|Phone|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),
            viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, 
            width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));
        </script>
    接下来我们来说表格，表格的滑动分为两部分，分别是表头滑动、表体滑动。
    1.表体滑动
        表体其实很简单，就是给表体一个高度height，然后overflow-y: scroll;
    2.表头滑动
        表头滑动的话就要在外边设置两个个div包裹表格
        <div class="table_out" style="height: calc(100% - 7.5rem);">
            <div class="table_box" style="height: calc(100%);">
        下面是表头左右滑动的代码
        .table_out {
            overflow-x: scroll;
            position: relative;
        }
        .table_box {
            overflow: hidden;
            position: absolute;}
        .table_out table thead tr th {
            width:3.5rem;
            height: 50px;
            text-align: center;
            word-break: keep-all;
            }
    关于表格滑动以及下面有按钮，按钮的样式的固定。
        关于下面的按钮，我直接是将他放在tbody外面，让他依附着tbody，随着屏幕变化，按钮会随着tbody一起。
    补充：这里为了不让其它部分一起变化，表格的所有父节点设置高度，table最外面的div节点的高度是height: calc(100% - 头部样式高度);tbody的高度还要减去底部按钮的高度。