当前位置：首页 > CSS

css制作精美表格

2026-03-11 21:33:59CSS

使用CSS制作精美表格的方法

基础样式优化

为表格添加边框、间距和圆角效果，提升视觉层次感。设置border-collapse: collapse确保边框合并，避免双线问题。

table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

表头设计

通过背景色、文字样式和悬停效果突出表头。使用渐变或纯色背景增加质感。

th {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

单元格样式

交替行颜色（斑马纹）提高可读性，添加过渡效果使交互更流畅。

td {
  padding: 10px 12px;
  border-bottom: 1px solid #e0e0e0;
  transition: background 0.3s ease;
}

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

tr:hover td {
  background-color: #f1f3ff;
}

响应式处理

添加横向滚动容器确保小屏幕设备上的可用性。

.table-container {
  overflow-x: auto;
  max-width: 100%;
}

@media (max-width: 768px) {
  th, td {
    padding: 8px 10px;
    font-size: 14px;
  }
}

高级装饰元素

使用伪元素添加视觉细节，如角落装饰或悬浮提示。

css制作精美表格

th::after {
  content: "";
  display: block;
  height: 2px;
  background: rgba(255,255,255,0.2);
  margin-top: 8px;
}

td:hover::before {
  content: attr(data-label);
  position: absolute;
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

完整示例代码

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>项目</th>
        <th>数量</th>
        <th>价格</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="项目">设计服务</td>
        <td data-label="数量">10</td>
        <td data-label="价格">$2,500</td>
      </tr>
    </tbody>
  </table>
</div>