移动端页面不兼容

Question

目标是做一个：左侧第一列固定，右侧可以移动的table。

在chrome模拟器下正常，如下:

左侧固定，右侧可以移动。

但是在手机端左侧relative的部分不显示：如下

具体用到的就两个css

/*左侧固定列class*/
.fixCol {
    position: absolute;
    min-width: 101px;
    left: 9px;
    border-top:1px solid #ddd;
}

/*table容器样式*/
.fixTableContainer {
    overflow-x: auto;
    margin-left: 99px;
}

求大神指导下，如何做个移动端的兼容。

---

尝试做了z-index，左侧同样不展示。

不是正解的解决：

/*左侧固定列class*/
.fixCol {
    position: absolute;
    min-width: 110px;
    top: auto;
    left: 9px;
    border-top:1px solid #ddd;
    /* add */
    display: inline-grid !important;
}

/*table容器样式*/
.fixTableContainer {
    overflow-x: auto;
    margin-left: 109px;
    /* add */
    float: left;
}

Answer 1

现在移动端都推荐使用最新的css3等新技术，不用考虑兼容性（前端福利）

• 使用flex，布局十分方便

• 也不知道具体的布局，你看是不是包含块没设置对(父级加个relative定位等), 或者给.fixCol加个top(经常top,left要同时写，不然有时会有问题)或者背景色（看它定位到哪去了)

Answer 2

在移动端上用px不太行吧，至少也是用百分比吧。

Answer 3

可以给下结构的代码吗，最好能放在jsfiddle上的。

Answer 4

移动端的单位一般都是用rem，不能用px,具体可以百度下