css ul制作表格

使用 ul 制作表格的方法

通过 CSS 样式将无序列表（ul）转换为表格布局，可以实现类似表格的视觉效果。以下是具体实现方法：

基本结构

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

<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 样式

通过 display: flex 或 display: grid 实现表格布局：

方法 1：Flexbox 布局

.table {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ddd;
}

.row {
  display: flex;
  border-bottom: 1px solid #ddd;
}

.cell {
  flex: 1;
  padding: 8px;
  text-align: center;
}

.row:last-child {
  border-bottom: none;
}

方法 2：Grid 布局

.table {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  border: 1px solid #ddd;
}

.row {
  display: contents; /* 子元素直接参与网格布局 */
}

.cell {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.cell:nth-child(2n) {
  border-right: none; /* 最后一列无右边框 */
}

注意事项

• 使用 display: contents 时需注意浏览器兼容性（IE 不支持）。
• 可通过调整 grid-template-columns 或 flex 的数值控制列宽。
• 添加 :hover 效果或斑马纹（交替行颜色）可增强可读性。

斑马纹示例

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