当前位置：首页 > CSS

表格css制作

2026-02-12 20:52:44CSS

基础表格样式设计

使用CSS为表格添加边框、间距和背景色是基础操作。通过border-collapse控制边框合并效果，padding调整单元格内边距。

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

斑马纹效果实现

通过:nth-child()选择器实现交替行颜色，增强表格可读性。结合hover效果提升交互体验。

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

响应式表格处理

针对小屏幕设备，可通过横向滚动或堆叠布局适配。使用overflow-x: auto创建滚动容器。

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

高级样式定制

添加圆角边框和阴影效果提升视觉层次。通过伪元素实现表头特殊样式。

table {
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  border-radius: 5px;
  overflow: hidden;
}
th {
  position: relative;
}
th::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #4facfe, #00f2fe);
}

表格排序指示器

为可排序表格添加视觉指示箭头，使用CSS三角形和旋转变换。

表格css制作

th.sortable {
  cursor: pointer;
  padding-right: 20px;
  position: relative;
}
th.sortable::before {
  content: "↑↓";
  position: absolute;
  right: 5px;
  opacity: 0.3;
}
th.sort-asc::before {
  content: "↑";
  opacity: 1;
}
th.sort-desc::before {
  content: "↓";
  opacity: 1;
}