当前位置：首页 > CSS

只用css制作表格

2026-04-01 16:51:34CSS

使用 CSS 制作表格的方法

使用 `display: table` 系列属性

可以通过 CSS 的 display: table、display: table-row 和 display: table-cell 属性模拟 HTML 表格结构，而不使用 <table> 标签。

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

使用 Flexbox 布局

Flexbox 可以用于创建类似表格的布局，但需要手动控制对齐和间距。

<div class="flex-table">
  <div class="flex-row">
    <div class="flex-cell">标题 1</div>
    <div class="flex-cell">标题 2</div>
  </div>
  <div class="flex-row">
    <div class="flex-cell">数据 1</div>
    <div class="flex-cell">数据 2</div>
  </div>
</div>

.flex-table {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.flex-row {
  display: flex;
}

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

使用 Grid 布局

CSS Grid 提供了更强大的表格布局控制能力。

<div class="grid-table">
  <div class="grid-cell">标题 1</div>
  <div class="grid-cell">标题 2</div>
  <div class="grid-cell">数据 1</div>
  <div class="grid-cell">数据 2</div>
</div>

.grid-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
}

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

样式增强

可以为表格添加更多样式效果，如悬停高亮、斑马条纹等。

只用css制作表格

/* 斑马条纹 */
.css-table-row:nth-child(even) {
  background-color: #f2f2f2;
}

/* 悬停效果 */
.css-table-row:hover {
  background-color: #ddd;
}

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

这些方法提供了纯 CSS 实现表格布局的多种选择，可根据具体需求选择最适合的方案。