怎么实现一个固定头部和固定左边第一列的table

有一个页面要放在手机上浏览。
这个页面是一个table。
这个table的头部是固定的，并且左侧第一列也是固定的。
头部固定就是往下滚动，头部不滚动，一直显示在上方。
第一列固定式横向滚动时第一列一直显示在左侧。
同时在横向滚动时头部的标题也要跟着横向滚动的。
现在已经实现固定第一列，但是固定头部一直做不出来，
我用position absolute 或者 fixed定位后排版都乱了，
表头的字段不会跟随数据内容宽度了，而且fiexd定位后横向滚动头部也一直固定了！！！
我实现的效果图：

第一列是固定了，但是如果向上滚动，头部没有固定！！
求大神帮忙，跪谢！！！！
代码，大神你复制这个代码到记事本，然后保存改后缀名html
然后通过QQ找到我的设备>>自己的移动设备发送过去，然后再手机上用浏览器打开就能看到效果！！
感谢大神帮忙！！！！！