css ul制作表格

使用 ul 制作表格的方法

通过 CSS 可以灵活地将无序列表（ul）样式化为表格布局，以下是具体实现方式：

基础 HTML 结构

<ul class="table">
  <li class="row">
    <span class="cell">Header 1</span>
    <span class="cell">Header 2</span>
  </li>
  <li class="row">
    <span class="cell">Data 1</span>
    <span class="cell">Data 2</span>
  </li>
</ul>

关键 CSS 样式

.table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  list-style: none;
  padding: 0;
}

.row {
  display: table-row;
}

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

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

响应式表格实现

添加媒体查询使表格在小屏幕下保持可读性：

@media (max-width: 600px) {
  .row {
    display: block;
    margin-bottom: 10px;
  }
  .cell {
    display: block;
    border: none;
    border-bottom: 1px solid #eee;
    padding: 6px 0;
  }
}

增强交互效果

增加悬停高亮和交替行颜色：

.row:not(:first-child):hover .cell {
  background-color: #f5f5f5;
}

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

注意事项

• 确保每个 row 内的 cell 数量一致
• 对于复杂表格建议使用原生 table 标签
• 可通过 nth-child 选择器实现斑马纹效果
• 使用 vertical-align 控制单元格内容垂直对齐

这种方法适合需要语义化标记或动态生成内容的场景，但需注意浏览器兼容性测试。