css制作表格样式

表格基础样式设置

使用border-collapse合并边框，避免双边框效果。设置表格宽度和字体增强可读性：

table {
  border-collapse: collapse;
  width: 100%;
  font-family: Arial, sans-serif;
}

单元格样式设计

通过padding增加内容间距，text-align控制对齐方式。添加边框线定义表格结构：

td, th {
  border: 1px solid #dddddd;
  padding: 12px;
  text-align: left;
}

表头特殊样式

使用背景色和文字加粗突出表头。固定表头位置适合长表格：

th {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  position: sticky;
  top: 0;
}

斑马条纹效果

通过:nth-child()选择器实现交替行颜色，提升可读性：

tr:nth-child(even) {
  background-color: #f2f2f2;
}

悬停高亮交互

添加鼠标悬停效果增强用户体验：

tr:hover {
  background-color: #e6e6e6;
  transition: background-color 0.3s;
}

响应式表格处理

针对移动设备添加横向滚动条：

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

边框圆角美化

为表格首尾行添加圆角效果：

tr:first-child th:first-child {
  border-top-left-radius: 8px;
}
tr:first-child th:last-child {
  border-top-right-radius: 8px;
}

单元格状态样式

为特殊状态单元格定义样式：

td.highlight {
  background-color: #fffacd;
  font-weight: bold;
}
td.warning {
  background-color: #ffcccb;
}