当前位置：首页 > CSS

CSS模板制作表格

2026-04-01 16:49:50CSS

CSS表格基础样式

使用CSS可以自定义表格的边框、背景、间距等属性。以下是一个基础表格样式模板：

/* 表格整体样式 */
table {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

/* 表头样式 */
th {
  background-color: #f2f2f2;
  color: #333;
  text-align: left;
  padding: 12px;
  border: 1px solid #ddd;
}

/* 单元格样式 */
td {
  padding: 10px;
  border: 1px solid #ddd;
}

/* 隔行变色效果 */
tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* 悬停高亮 */
tr:hover {
  background-color: #e6f7ff;
}

响应式表格设计

通过媒体查询实现小屏幕下的表格横向滚动：

@media (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

斑马线表格进阶版

增加圆角边框和阴影效果：

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

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

table.advanced tr:last-child td {
  border-bottom: none;
}

无边框简约风格

适合数据仪表盘等场景：

table.minimalist {
  border: none;
}

table.minimalist td, 
table.minimalist th {
  border: none;
  padding: 8px 15px;
}

table.minimalist tr:not(:last-child) td {
  border-bottom: 1px dashed #eee;
}

固定表头滚动表格

通过CSS实现表头固定、内容区域滚动：

CSS模板制作表格

<div class="scrollable-table">
  <table>
    <thead>
      <tr><th>Header</th></tr>
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </tbody>
  </table>
</div>

.scrollable-table {
  height: 300px;
  overflow-y: auto;
}

.scrollable-table thead th {
  position: sticky;
  top: 0;
  background: white;
  box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);
}