css制作表格效果

使用CSS制作表格效果

基础表格样式

通过border-collapse属性合并边框，使表格看起来更整洁。设置width和margin控制表格大小和位置。

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

斑马纹效果

使用:nth-child(even)选择器为偶数行添加背景色，提升可读性。

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

悬停高亮

通过:hover伪类实现鼠标悬停时行高亮效果。

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

表头固定样式

为表头(<th>)设置区别于表格内容的样式，通常使用深色背景和白色文字。

th {
  background-color: #4CAF50;
  color: white;
}

响应式表格

在小屏幕设备上，通过媒体查询调整表格布局，可能改为块级显示或隐藏部分列。

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

圆角边框

为表格添加圆角效果，需配合border-collapse: separate使用。

table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
}

单元格对齐

通过text-align和vertical-align属性控制单元格内容对齐方式。

td {
  text-align: center;
  vertical-align: middle;
}

边框样式定制

为不同边设置不同边框样式，增强视觉效果。

th {
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
}

阴影效果

为表格添加阴影，提升层次感。

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

交替列样式

类似于斑马纹，但应用于列而不是行。

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