h5页面实现一个内容区域可水平滚动的table

<script setup>
import smallTitle from "@/components/smallTitle.vue";
</script>

<template>
  <div class="home_container">
    <smallTitle title="绩效结果公示"> </smallTitle>
    <div class="table-container">
      <table>
        <thead>
          <tr>
            <th>工号</th>
            <th>姓名</th>
            <th>部门</th>
            <th>职务等级</th>
            <th>职务</th>
            <th>中心</th>
            <th>人员类型</th>
            <th>签证类型</th>
            <th>护照号码</th>
            <th>护照有效期</th>
            <th>差旅行程</th>
            <th>出差天数</th>
            <th>审批状态</th>
            <th class="thelastcolumn">操作</th>
            <!-- 可以继续添加更多列 -->
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
            <td>
              sdhoisahdopsah地方GIS打更覅USD啊过户披萨回顾武器干哈放醋武器书发的宿管会粗判定为购房户王企鹅哦怕怕广发沪du
              海鲜凑陪我死得很惨哦is等哈 内容4
            </td>
            <td>内容5</td>
            <td>内容5</td>
            <td>内容5</td>
            <td>内容5</td>
            <td>内容5</td>
            <td>内容5</td>
            <td>内容5</td>
            <td>内容5</td>
            <td>内容5</td>
            <td class="thelastcolumn1">
              <van-button
                :disabled="contractState"
                type="warning"
                size="mini"
                icon="eye-o"
              ></van-button>
            </td>
            <!-- 可以继续添加更多内容 -->
          </tr>

          <!-- 可以继续添加更多行 -->
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home_container {
  background-color: #f2f4f6;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.table-container {
  width: 100%;
  overflow-x: auto; /* 当内容超出容器宽度时显示水平滚动条 */
  -webkit-overflow-scrolling: touch; /* 优化移动端滚动体验 */
  margin-top: 20px;
  padding-bottom: 20px;
}

table {
  border-collapse: collapse;
  min-width: max-content; /* 让表格宽度至少等于其内容的宽度 */
}

th {
  color: #ffffff;
  text-align: center;
  font-family: "Source Han Sans CN";
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  background-color: #0057c8;
  height: 75px;
}

th,
td {
  padding: 8px 12px;
  max-width: 300px;
  text-align: center;
  font-family: "Source Han Sans CN";
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
}

.thelastcolumn {
  position: sticky;
  right: 0;
  background-color: #0057c8; /* 确保背景颜色一致 */
  z-index: 1; /* 确保在滚动时不会被其他内容遮挡 */
}
.thelastcolumn1 {
  position: sticky;
  right: 0;
  z-index: 1; /* 确保在滚动时不会被其他内容遮挡 */
//   background-color: #e7f0fe;
}
</style>