效果图

html结构

表格数据对应渲染功能实现思路：其实看代码就能了解了，就很简单的用循环数组，然后把数组中的每一项对应放在一个位置就行了。这样循环几个，就有几列数据，后台传过来的数据就分成两个，一个就是第一列的科目，另外的就是后面的每个人的名字和他的成绩，只需要循环放在对应位置

            <!-- 表格部分 -->
            <div >
              <div>
                <van-notice-bar
                  scrollable
                  style="margin-bottom: 10px; margin-left: 15px; width: 90vw"
                  left-icon="volume-o"
                  text="空白(没有参加) 横杠 (没有这项考试)"
                />
              </div>
              <!-- 表格部分 -->
              <div class="result_wrap">
                <div>
                  <div class="result_box aaa">
                    <p class="result_title result_bottom">科目 | 学员</p>
                    <p
                      class="result_title result_bottom"
                      v-for="(item, index) in result_analysis.subjectList"
                      :key="index"
                    >
                      {{ item.testSubjectName }}
                    </p>
                  </div>
                  <div class="bbb">

                  <div
                    class="result_box"
                    v-for="(item, index) in result_analysis.list_result_new"
                    :key="index"
                  >
                    <p class="result_title result_bottom">{{ item.name }}</p>
                    <!-- <p class="result_title">{{item.resultScore}}</p> -->
                    <p class="result_title">{{ item.yintixiangshang }}</p>
                    <p class="result_title">{{ item.fuwocheng }}</p>
                    <p class="result_title">{{ item.yangwoqizuo }}</p>
                    <p class="result_title">{{ item.lidingtiaoyuan }}</p>
                    <p class="result_title">{{ item.wangfanpao }}</p>
                    <p class="result_title">{{ item.changpao1200 }}</p>
                    <p class="result_title">{{ item.changpao800 }}</p>
                  </div>
                  </div>
                </div>
              </div>
            </div>

css部分

.result_wrap {
  width: 100%;
  white-space: nowrap;
  overflow: auto;
  margin-top: 20px;
}
.result_box {
  display: inline-block;
  width: 105px;
  border: solid #ccc 1px;
}
.result_title {
  height: 40px;
  border-bottom: solid 1px #ccc;
  margin: 0;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}
.aaa{position: fixed;z-index: 100;background-color: #fff;}
.bbb{margin-left: 105px;}

css让表格超出部分不换行并有滚动条实现核心思路：首先用浮动或者inline-block来让所有元素一行排列，这时候肯定排不下的会自动换行，我们就给父级盒子加个white-space: nowrap;强制一行排列，不让他换行，然后给宽度设置一个百分百，并给个overflow: auto;让他超出的隐藏并可以滚动。就搞定了。

表格第一列固定实现思路：很简单，就是给第一列的盒子单独加个固定定位就行了，然后用z-index让他显示在前面。这样滑动的时候不会被后面的表格覆盖住，然后给个底色让文字不会重叠看的明显一点，最后把除了第一列的其他列的父级盒子给个margin-left，值就是第一列的宽度，这样就不会第二列的因为第一列是定位脱离文档流被盖住了。