网页表格制作css代码

基础表格样式

使用CSS为HTML表格添加基础样式，如边框、间距和背景色：

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

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: #f1f1f1;
}

响应式表格设计

针对移动设备优化表格显示，当屏幕过小时转为块状布局：

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

  table thead {
    display: none;
  }

  tr {
    margin-bottom: 10px;
    display: block;
    border: 1px solid #ddd;
  }

  td {
    display: block;
    text-align: right;
    border-bottom: 1px dotted #ccc;
  }

  td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

高级表格效果

添加更复杂的美化效果，如圆角、阴影和过渡动画：

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

table.advanced th {
  background-color: #4CAF50;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
}

table.advanced tr {
  transition: background-color 0.3s ease;
}

table.advanced tr:hover {
  background-color: #e8f5e9;
}

斑马条纹表格

创建交替行颜色的表格样式：

table.striped {
  border: none;
}

table.striped tr:nth-child(odd) {
  background-color: #ffffff;
}

table.striped tr:nth-child(even) {
  background-color: #f5f5f5;
}

table.striped td {
  border: none;
  padding: 12px 15px;
}

固定表头表格

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

.table-container {
  height: 400px;
  overflow-y: auto;
}

table.fixed-header thead {
  position: sticky;
  top: 0;
  z-index: 10;
}