当前位置：首页 > CSS

css ul制作表格

2026-01-28 14:11:15CSS

使用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;
}