制作表格css样式

基础表格样式

为表格添加基础样式，包括边框、间距和字体调整：

table {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
  font-family: Arial, sans-serif;
}
th, td {
  border: 1px solid #ddd; /* 边框颜色 */
  padding: 12px; /* 内边距 */
  text-align: left;
}
th {
  background-color: #f2f2f2; /* 表头背景色 */
  font-weight: bold;
}

斑马纹效果

通过 nth-child 实现交替行背景色，提升可读性：

tr:nth-child(even) {
  background-color: #f9f9f9;
}
tr:hover {
  background-color: #f1f1f1; /* 悬停效果 */
}

响应式表格

针对小屏幕设备添加横向滚动：

@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
  }
}

圆角与阴影

为表格添加现代设计元素：

table {
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 阴影 */
  overflow: hidden; /* 确保圆角生效 */
}

单元格状态样式

通过类名标记特殊单元格（如高亮、警告）：

td.highlight {
  background-color: #ffeb3b;
}
td.warning {
  background-color: #ff9800;
  color: white;
}

固定表头

长表格滚动时保持表头固定：

thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

紧凑型表格

减少内边距以适应密集数据：

table.compact td, table.compact th {
  padding: 6px 8px;
  font-size: 14px;
}

以上样式可根据实际需求组合使用。通过调整颜色、间距和交互效果，可快速适配不同设计场景。