bootstrap表格添加class="table-responsive"，thead宽度auto，表头表身错位

Question

设计要求表头固定表身滚动，按照网上的方案css是这样写的，表外包裹一个class="table-responsive"的div

thead,tbody tr{
    display:table;
    width:100%;
    table-layout: fixed;
}
tbody{
    display:block;
    height:280px;
    overflow-y: scroll;
}

这在pc端完全没问题，但是模拟移动端尺寸大小时，需要效果为tbody超280时竖向滚动，整个table超屏幕宽度横向滚动。
上述css放在移动端发现表头都紧凑的挤在一起，对字长的th简直就是灾难！然后我改成了如下css，内容是舒展开了但还是存在错位问题：

thead{
          width:auto;
}
tbody tr{
    width:100%;
}
thead,tbody tr{
         table-layout: fixed;
    display:table;
}
tbody{
    display:block;
    height:280px;
    overflow-y: scroll;
}

求解决方法

Answer 1

bootstrap设置表头固定可能会遇到很多兼容问题，具体可以参考下：
bootstrap-table实现表头固定以及列固定_huaweichenai的博客-CSDN博客_bootstrap 表头固定 之前使用bootstrap写了一个报表表格，最近突然找到我，说让我看看能不能将表格的表头和第一列进行固定，这样的话方便查看数据，于是，我开始了苦逼的研究起来，毕竟我是个后端啊，对于前端的样式问题，特别是小功能，烦的一批这里就记录下我的研究成果一：引入js和css<!-- 引入jquery --><script type="text/javascript" src=... https://blog.csdn.net/huaweichenai/article/details/88245809