div#page {
  max-width:1250px; /* 只是为了展示水平滚动和粘性900 */
}
table#chart {
  width:1250px; /* 只是为了展示水平滚动和粘性1600 */ 
  margin:0;
  border:none;
  background-color:#FFF;
  border-collapse:separate;
  border-spacing:0;
  border-left:1px solid #ccc;
}
table#chart th {
  background:#777;
  border-right:1px solid #999;
  color:#FFF;
  padding:3px;
  position:sticky;
  top:0;
  /* 确保向下滚动时标题行位于其他所有内容之上 */
  z-index:1;
}
table#chart td {
  background:#fff;
  border-right:1px solid #ccc;
  border-bottom:1px solid #ccc;
  padding:4px 5px;
}
/* 确保向右滚动时第一个标题单元格位于其他单元格之上 */
table#chart th:first-child {
  position:sticky;
  left:0;
  z-index:2;
}
/* 向右滚动时使第一列具有粘性 */
table#chart td:first-child {
  position:sticky;
  left:0;
  border-right-color:#aaa;
}



/* 定义2 */ 


/* chart2定义 */


div#page2 {
  max-width: 600px; /* 容器的最大宽度 */
  overflow-x: auto; /* 启用水平滚动条 */
  overflow-y: visible; /* 确保垂直方向不出现滚动条 */
  padding: 20px; /* 为内容留出空间 */
}
 
table#chart2 {
  width: 600px; /* 表格的宽度 */
  margin: 0;
  border: none;
  background-color: #FFF;
  border-collapse: collapse; /* 合并边框 */
  border-spacing: 0;
  border-left: 1px solid #ccc;
}
 
/* 固定第一行（标题行） */
table#chart2 thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #777; /* 确保背景颜色正确显示 */
}
 
/* 固定第一列（左侧单元格） */
table#chart2 td:first-child,
table#chart2 th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}
 
/* 表头样式 */
table#chart2 th {
  background: #777;
  border-right: 1px solid #999;
  color: #FFF;
  padding: 3px;
}
 
/* 表格单元格样式 */
table#chart2 td {
  background: #fff;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 4px 5px;
}
 
/* 第一列样式 */
table#chart2 td:first-child {
  background: #f0f0f0;
  border-right-color: #aaa;
}
 
/* 自定义滚动条样式 */
div#page2::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
}
 
div#page2::-webkit-scrollbar-track {
  background: #f0f0f0; /* 滚动条轨道颜色 */
}
 
div#page2::-webkit-scrollbar-thumb {
  background: #ccc; /* 滚动条滑块颜色 */
}


/* ============================================================
   主表 table#chart 美化（追加于文件末尾，覆盖上方同名规则）
   所有引用本 css 的模板主表自动生效，无需改动各 .php。
   保留原有"表头吸顶 + 左侧第一列粘性"特性（position:sticky 沿用上方规则）。
   ============================================================ */

/* 解除固定宽度，列宽按内容自适应分配，避免窄列挤压成竖排 */
table#chart {
  width: auto !important;
  min-width: 100%;
  font-size: 13px;
}

/* 表头：加深底色、白字、居中 */
table#chart th {
  background: #2f3b52;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  padding: 6px 8px;
  white-space: nowrap;
  font-weight: 600;
}

/* 单元格：取消省略号/单行限制 → 允许自动换行、多行完整展示全部内容；垂直居中；禁止竖排 */
table#chart td {
  text-align: center;
  vertical-align: middle;
  padding: 6px 8px;
  white-space: normal !important;   /* 允许自动换行（不使用 nowrap） */
  word-break: break-all;            /* 长英文/数字连续字符也可断行 */
  writing-mode: horizontal-tb !important; /* 禁止竖排（确保横向） */
}

/* 隔行变色：直接给单元格不透明底色（兼顾左侧粘性列，不重叠），并压过上方 td 白底 */
table#chart tr:nth-child(odd)  td { background: #f6f8fb; }
table#chart tr:nth-child(even) td { background: #ffffff; }
table#chart tr:hover td { background: #b8d4f0 !important; }  /* ===== hover加深 ===== */

/* 车辆型号链接保持红色可点击（原有跳转功能不变） */
table#chart td .model-link { color: #d14836; text-decoration: underline; }