当前位置：首页 > CSS

css制作精美表格

2026-04-01 17:39:39CSS

CSS 制作精美表格的方法

基础表格样式优化 通过设置边框、间距和背景色提升基础表格的可读性。使用 border-collapse: collapse 合并边框，避免双线效果。单元格内边距（padding）确保内容不紧贴边框。

table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
}
th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}

斑马纹效果 通过 nth-child(even/odd) 为交替行添加不同背景色，增强视觉引导。

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

悬停高亮 为表格行添加悬停效果，提升交互体验。

css制作精美表格

tr:hover {
  background-color: #f1f1f1;
}

圆角与阴影 为表格整体添加圆角和阴影，增加立体感。

table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

表头固定 通过 position: sticky 实现滚动时表头固定。

css制作精美表格

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

响应式表格 使用 overflow-x: auto 确保小屏幕下表格可横向滚动。

.table-container {
  overflow-x: auto;
}

高级样式示例 结合渐变背景和动画效果。

th {
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  color: white;
  transition: all 0.3s;
}
th:hover {
  background: linear-gradient(135deg, #a777e3, #6e8efb);
}

注意事项