.table-container {
  /* 容器設定水平捲動 */
  width: 100%;
  overflow-x: auto;
  /* 確保表格的高度不會太高，才能看到水平捲動 */
  max-height: 500px;
  overflow-y: auto; /* 也可能需要垂直捲動 */
}

.fixed-table-striped > tbody > tr:nth-of-type(2n+1) > * {
  --ct-table-color-type: var(--ct-table-striped-color);
  --ct-table-bg-type: var(--ct-table-striped-bg);
}

.fixed-table-striped > tbody > tr:nth-of-type(2n) > * {
  /*--ct-table-color-type: var(--ct-table-striped-color);*/
  --ct-table-color-type:#000000;
  /*--ct-table-bg-type: var(--ct-table-hover-bg);*/
  --ct-table-bg-type: #ffffff;
}

/* 表格本身的基本樣式 */
.fixed-columns-table {
  width: 100%; /* 確保表格內容可以超出容器，觸發捲動 */
  border-collapse: collapse; /* 讓表格邊框合併 */
}

.fixed-columns-table th,
.fixed-columns-table td {
  padding: 8px 12px;
  border: 1px solid #dee2e6; /* Bootstrap 預設的邊框顏色 */
  white-space: nowrap; /* 確保內容不換行，這樣才能觸發水平捲動 */
  vertical-align: top;
  background-color: #fff; /* 所有單元格的預設背景色 */
}

/* 固定第一欄 */
.fixed-columns-table th:nth-child(1),
.fixed-columns-table td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 2; /* 確保在其他單元格之上 */
  background-color: #f8f9fa; /* 淺灰色背景，使其突出 */
  /* 可以設定一個最小寬度，防止內容太少時固定欄位太窄 */
  min-width: 150px;
}

/* 固定第二欄 */
.fixed-columns-table th:nth-child(2),
.fixed-columns-table td:nth-child(2) {
  position: sticky;
  left: 150px; /* 這裡的 '80px' 是第一欄的寬度。你需要根據實際內容調整 */
  z-index: 2;
  background-color: #f8f9fa;
  min-width: 120px;
}

/* 固定第三欄 */
.fixed-columns-table th:nth-child(3),
.fixed-columns-table td:nth-child(3) {
  position: sticky;
  /* 這裡的 '270px' 是第一欄寬度 + 第二欄寬度 (150px + 120px) */
  left: 270px;
  z-index: 2;
  background-color: #f8f9fa;
  min-width: 100px;
}

/* 固定第四欄 */
.fixed-columns-table th:nth-child(4),
.fixed-columns-table td:nth-child(4) {
  position: sticky;
  /* 這裡的 '420px'  */
  left: 370px;
  z-index: 2;
  background-color: #f8f9fa;
  min-width: 100px;
}

/* 確保表頭在垂直捲動時也固定 */
.fixed-columns-table thead th {
  position: sticky;
  top: 0;
  z-index: 3; /* 比固定欄位的 z-index 更高 */
  background-color: #e9ecef; /* 表頭背景色 */
}

/* 特別處理固定欄位在表頭時的 z-index，確保它高於非固定表頭 */
.fixed-columns-table thead th:nth-child(1),
.fixed-columns-table thead th:nth-child(2),
.fixed-columns-table thead th:nth-child(3),
.fixed-columns-table thead th:nth-child(4){
  z-index: 4; /* 讓固定的表頭在滾動時顯示在最上層 */
}