div css表格制作

2026-04-02 15:19:38CSS

使用DIV和CSS创建表格

通过DIV和CSS可以实现类似传统HTML表格的布局，同时提供更灵活的样式控制。以下是实现方法：

HTML结构

<div class="table">
  <div class="row">
    <div class="cell">标题1</div>
    <div class="cell">标题2</div>
    <div class="cell">标题3</div>
  </div>
  <div class="row">
    <div class="cell">内容1</div>
    <div class="cell">内容2</div>
    <div class="cell">内容3</div>
  </div>
</div>

CSS样式

div css表格制作

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

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

/* 表头样式 */
.row:first-child .cell {
  font-weight: bold;
  background-color: #f2f2f2;
}

响应式表格实现

针对移动设备优化显示效果，可以添加响应式设计：

@media screen and (max-width: 600px) {
  .table, .row, .cell {
    display: block;
  }

  .row {
    margin-bottom: 15px;
    border: 1px solid #ddd;
  }

  .cell {
    padding: 8px;
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }

  .cell:before {
    position: absolute;
    left: 10px;
    width: 45%;
    padding-right: 10px;
    content: attr(data-label);
    font-weight: bold;
  }
}

HTML需要添加data-label属性：

div css表格制作

<div class="cell" data-label="标题1">内容1</div>

表格美化技巧

添加悬停效果和斑马条纹增强可读性：

/* 斑马条纹 */
.row:nth-child(even) {
  background-color: #f9f9f9;
}

/* 悬停效果 */
.row:hover {
  background-color: #f1f1f1;
}

/* 圆角边框 */
.table {
  border-radius: 5px;
  overflow: hidden;
}

/* 表头固定 */
.table-container {
  height: 300px;
  overflow-y: auto;
}

高级表格功能实现

固定表头和可滚动内容区域：

<div class="table-container">
  <div class="table">
    <div class="header">
      <div class="row">
        <div class="cell">固定标题1</div>
        <div class="cell">固定标题2</div>
      </div>
    </div>
    <div class="body">
      <!-- 内容行 -->
    </div>
  </div>
</div>

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

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: white;
}

浏览器兼容性注意事项

为确保跨浏览器兼容性，可以添加以下前缀：

.table {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.cell {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}