只用css制作表格

使用CSS制作表格的方法

使用CSS制作表格可以通过display: table、display: table-row和display: table-cell属性模拟传统HTML表格的结构，同时保持样式与内容的分离。

基础表格结构

HTML结构使用div或其他语义化标签替代table、tr、td，通过CSS赋予表格行为：

<div class="css-table">
  <div class="css-table-row">
    <div class="css-table-cell">单元格1</div>
    <div class="css-table-cell">单元格2</div>
  </div>
  <div class="css-table-row">
    <div class="css-table-cell">单元格3</div>
    <div class="css-table-cell">单元格4</div>
  </div>
</div>

CSS样式定义

通过display属性定义表格、行和单元格的布局方式：

.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; /* 单元格边框 */
}

添加表头样式

模拟<th>标签可通过额外类名实现：

.css-table-header {
  font-weight: bold;
  background-color: #f2f2f2;
}

响应式表格

对于小屏幕设备，可通过媒体查询将表格转换为堆叠布局：

@media (max-width: 600px) {
  .css-table-row {
    display: block;
    margin-bottom: 10px;
  }
  .css-table-cell {
    display: block;
    border: none;
    padding: 5px 0;
  }
}

表格美化扩展

添加悬停效果和斑马纹：

.css-table-row:hover {
  background-color: #f5f5f5;
}

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

这种方法提供了比传统HTML表格更高的灵活性，同时避免了表格标签的语义限制。