当前位置：首页 > CSS

css制作表格效果

2026-04-01 18:07:16CSS

使用纯CSS制作表格效果

通过CSS可以灵活地控制表格样式，无需依赖传统HTML表格标签。以下方法利用display: table等属性模拟表格结构：

<div class="css-table">
  <div class="css-table-row">
    <div class="css-table-cell">Header 1</div>
    <div class="css-table-cell">Header 2</div>
  </div>
  <div class="css-table-row">
    <div class="css-table-cell">Data 1</div>
    <div class="css-table-cell">Data 2</div>
  </div>
</div>

.css-table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.css-table-row {
  display: table-row;
}

.css-table-cell {
  display: table-cell;
  padding: 8px;
  border: 1px solid #ddd;
}

响应式表格设计

针对移动设备优化表格显示，在小屏幕下转换为卡片布局：

@media (max-width: 600px) {
  .css-table-row { 
    display: block;
    margin-bottom: 1em;
  }
  .css-table-cell {
    display: block;
    border: none;
    position: relative;
    padding-left: 50%;
  }
  .css-table-cell:before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 45%;
    padding-right: 10px;
    font-weight: bold;
  }
}

斑马条纹效果

增强表格可读性的交替行颜色：

.css-table-row:nth-child(even) {
  background-color: #f2f2f2;
}

悬停高亮效果

提升交互体验的行悬停反馈：

.css-table-row:hover {
  background-color: #e6e6e6;
  transition: background 0.3s ease;
}

固定表头实现

长表格滚动时保持表头可见：

.css-table-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
  box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);
}

边框样式定制

创建更现代的边框效果：

.css-table {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}
.css-table-cell {
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}
.css-table-cell:last-child {
  border-right: none;
}

单元格对齐控制

精确控制内容对齐方式：

.css-table-cell {
  text-align: left;
  vertical-align: middle;
}
.number-cell {
  text-align: right;
}
.center-cell {
  text-align: center;
}

表格阴影与浮动效果

增加视觉层次感：

css制作表格效果

.css-table {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
}
.css-table:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

这些CSS技术可以组合使用，根据具体需求创建各种风格的表格效果，从简单的数据展示到复杂的交互式表格都能实现。