如何用html+css实现table表格固定表头，表格既可以横向滚动也可以竖向滚动

如何用html+css实现table表格固定表头，且表格有分组，表格既可以横向滚动也可以竖向滚动
我自己写了一个，但是表头分组不固定，咋搞

img


<template>
  <div class="print">
    <button @click="print">打印</button>
  </div>
  <div ref="printHtml">
    <div class="wraper">
      <div class="container">
        <table>
          <thead>
            <tr>
              <th rowspan="2">序号</th>
              <th rowspan="2">标题1</th>
              <th colspan="2">标题2</th>
              <th rowspan="2">标题3</th>
              <th rowspan="2">标题3</th>
              <th rowspan="2">标题3</th>
              <th rowspan="2">标题3</th>
              <th rowspan="2">标题3</th>
              <th rowspan="2">标题3</th>
              <th rowspan="2">标题3</th>
              <th rowspan="2">标题3</th>
              <th rowspan="2">标题3</th>
              <th rowspan="2">标题3</th>
              <th rowspan="2">标题3</th>
            </tr>
            <tr>
              <th>a</th>
              <th>b</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>内容1</td>
              <td colspan="2">内容2</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
            </tr>
            <tr>
              <td>2</td>
              <td>内容1</td>
              <td colspan="2">内容2</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
            </tr>
            <tr>
              <td>3</td>
              <td>内容1</td>
              <td colspan="2">内容2</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
            </tr>
            <tr>
              <td>4</td>
              <td>内容1</td>
              <td colspan="2">内容2</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
            </tr>
            <tr>
              <td>5</td>
              <td>内容1</td>
              <td colspan="2">内容2</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
            </tr>
            <tr>
              <td>5</td>
              <td>内容1</td>
              <td colspan="2">内容2</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
            </tr>
            <tr>
              <td>5</td>
              <td>内容1</td>
              <td colspan="2">内容2</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
            </tr>
            <tr>
              <td>5</td>
              <td>内容1</td>
              <td colspan="2">内容2</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
              <td>内容3</td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>

  </div>
</template>

<script>
import { reactive, ref } from "vue";

export default {
  setup() {
    const printHtml = ref();
    const print = () => {
      let bodyHtml = window.document.body.innerHTML;
      window.document.body.innerHTML = printHtml.value.innerHTML;
      // console.log(printHtml.value);
      window.print();
      window.document.body.innerHTML = bodyHtml;
      window.location.reload();
    }
    return {
      print,
      printHtml,
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 600px;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: scroll;
}

table {
  table-layout: fixed;
  border: none;
  border-collapse: collapse;
  background: white;
  text-align: center;

  thead {
    tr {
      color: white;
      height: 70px;

      th {
        background-color: #CCE8EB;
        min-width: 100px;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 3;
      }
    }
  }

  tbody {
    tr {
      height: 50px;
      color: green;

      td {
        min-width: 100px;
        position: -webkit-sticky;
        position: sticky;
      }

    }
  }

}
</style>

推荐bootstrap-table，功能很全


也支持vue
Bootstrap Table Examples An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. https://examples.bootstrap-table.com/#welcomes/vue-component.html

很多现成的可参考：

可滚动高度只定义表格内容区域，不要连着表头

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632