css ul制作表格

使用CSS的ul元素制作表格

通过CSS的display属性，可以将ul元素转换为表格布局，实现类似表格的效果。这种方法适用于需要灵活布局但不想使用传统table标签的场景。

基本结构

HTML部分使用ul和li模拟表格的行和列：

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

CSS样式

通过display: table等属性模拟表格行为：

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

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

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

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

响应式处理

添加媒体查询以适应不同屏幕尺寸：

@media (max-width: 600px) {
  .table-row {
    display: block;
    margin-bottom: 10px;
  }
  .table-cell {
    display: block;
    width: 100%;
  }
}

替代方案：Flexbox布局

如果不需要严格的表格语义，可以使用Flexbox实现类似效果：

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

.flex-table {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
}

.flex-row span {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
}

注意事项

• 语义化：如果需要真正的表格数据，建议优先使用<table>标签
• 浏览器兼容性：display: table系列属性在IE8+支持良好
• 性能：复杂布局时，原生表格性能可能优于CSS模拟方案