当前位置：首页 > CSS

制作表格css

2026-01-28 04:09:04CSS

基础表格样式

为表格添加基础样式可以提升可读性和美观度。以下代码设置了边框、间距和字体：

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

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

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

斑马纹效果

交替行颜色能提高表格的可读性：

制作表格css

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

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

响应式表格

在小屏幕设备上添加水平滚动：

制作表格css

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

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

高级样式选项

更复杂的设计可以包含以下特性：

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

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

td.highlight {
  background-color: #ffeb3b;
  font-weight: bold;
}

排序指示器

为可排序表格添加视觉提示：

th.sortable {
  cursor: pointer;
  position: relative;
}

th.sortable:after {
  content: "↑↓";
  margin-left: 5px;
  opacity: 0.3;
}

th.sort-asc:after {
  content: "↑";
  opacity: 1;
}

th.sort-desc:after {
  content: "↓";
  opacity: 1;
}

这些CSS代码片段可以根据具体需求组合使用或单独实现，通过调整颜色、间距和效果参数来匹配网站的整体设计风格。