css制作表格效果

CSS 表格基础样式

通过 CSS 可以自定义表格的边框、间距、颜色等属性。以下是一个基础示例：

table {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
  margin: 20px 0;
}

th, td {
  border: 1px solid #ddd; /* 单元格边框 */
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2; /* 表头背景色 */
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f9f9f9; /* 隔行变色 */
}

悬停高亮效果

为表格行添加悬停交互效果：

tr:hover {
  background-color: #e6f7ff; /* 悬停背景色 */
  transition: background-color 0.3s ease;
}

响应式表格

当屏幕宽度不足时，可以通过以下方式让表格横向滚动：

.table-container {
  overflow-x: auto;
  max-width: 100%;
}

斑马线表格

使用 CSS 选择器实现交替行颜色：

tr:nth-child(odd) {
  background-color: #ffffff;
}
tr:nth-child(even) {
  background-color: #f5f5f5;
}

圆角边框表格

为表格添加现代风格的圆角：

table {
  border-radius: 8px;
  overflow: hidden; /* 确保圆角生效 */
}

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

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

固定表头表格

实现内容滚动时表头固定的效果：

.table-scroll {
  height: 300px;
  overflow-y: auto;
}

thead th {
  position: sticky;
  top: 0;
  background-color: #f8f9fa;
  z-index: 10;
}

表格阴影效果

添加微妙的阴影提升层次感：

table {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

这些 CSS 技巧可以单独使用或组合应用，根据实际需求调整颜色、间距等参数，创建符合设计风格的表格效果。