css表格制作考试

CSS表格制作基础方法

使用<table>标签创建表格结构，搭配CSS实现样式控制。基本结构包含<thead>、<tbody>和<tr>等元素。

<table class="exam-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>科目</th>
      <th>成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>数学</td>
      <td>85</td>
    </tr>
  </tbody>
</table>

.exam-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}
.exam-table th, .exam-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
.exam-table th {
  background-color: #f2f2f2;
}

响应式表格实现

通过媒体查询和滚动容器实现小屏幕适配：

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

@media (max-width: 600px) {
  .exam-table {
    font-size: 14px;
  }
  .exam-table th, .exam-table td {
    padding: 4px 6px;
  }
}

斑马条纹效果

使用nth-child伪类实现交替行颜色：

.exam-table tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}
.exam-table tbody tr:hover {
  background-color: #e6f7ff;
}

表头固定技术

对于长表格，可通过CSS实现滚动时表头固定：

.table-scroll {
  height: 300px;
  overflow-y: auto;
}
.table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 10;
}

单元格特殊样式

为不同分数段添加颜色标识：

.exam-table td[data-score="A"] {
  color: #4CAF50;
  font-weight: bold;
}
.exam-table td[data-score="F"] {
  color: #F44336;
}

边框样式优化

实现更专业的边框效果：

.exam-table {
  border: 1px solid #ccc;
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}
.exam-table th {
  border-bottom: 2px solid #666;
}

表格标题和脚注

添加<caption>元素并设置样式：

<table>
  <caption>2023年度考试成绩表</caption>
  <!-- 表格内容 -->
</table>

caption {
  caption-side: top;
  font-size: 1.2em;
  font-weight: bold;
  padding: 10px 0;
  text-align: center;
}