/* 表格容器 - 双向滚动 */
.table-scroll-wrapper {
  width: 100%;
  height: 60vh; /* 默认高度为视口60% */
  max-height: 800px;
  overflow: auto;
  margin: 20px 0;
  background: #f5f5f5;
  padding: 5px;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  position: relative; /* 为固定表头提供定位上下文 */
}

/* 基础表格样式 */
.table-scroll-wrapper table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  background: white;
}

/* 固定第一行表头 */
.table-scroll-wrapper tr:first-child {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #445974; /* 表头背景色 */
  color: white; /* 表头文字颜色 */
}

/* 表格单元格样式 */
.table-scroll-wrapper td {
  border: 1px solid #ddd;
  padding: 12px 15px;
  text-align: center;
  white-space: nowrap;
}

/* 交替行颜色 */
.table-scroll-wrapper tr:nth-child(even) td {
  background-color: #f3f7fb;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .table-scroll-wrapper {
    height: 50vh;
  }
  .table-scroll-wrapper td {
    padding: 8px 10px;
  }
}

@media (max-width: 576px) {
  .table-scroll-wrapper {
    height: 400px;
  }
}

/* 美化滚动条 */
.table-scroll-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.table-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #445974;
  border-radius: 4px;
}
.table-scroll-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}