css表格制作表格

CSS 表格制作方法

使用 CSS 创建表格可以通过多种方式实现，包括原生 HTML 表格元素结合 CSS 样式，或者使用纯 CSS 布局技术（如 Flexbox 或 Grid）模拟表格效果。以下是常见方法：

使用 HTML 表格元素 + CSS 样式

通过 <table>、<tr>、<th>、<td> 等原生标签构建表格结构，再用 CSS 美化：

<table class="styled-table">
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容A</td>
      <td>内容B</td>
    </tr>
  </tbody>
</table>

.styled-table {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
  margin: 1rem 0;
}

.styled-table th, 
.styled-table td {
  padding: 12px;
  text-align: left;
  border: 1px solid #ddd; /* 单元格边框 */
}

.styled-table th {
  background-color: #f2f2f2; /* 表头背景色 */
}

.styled-table tr:nth-child(even) {
  background-color: #f9f9f9; /* 隔行变色 */
}

使用 CSS Grid 模拟表格

通过 Grid 布局实现类似表格的响应式结构，适合需要灵活控制布局的场景：

<div class="grid-table">
  <div class="header">标题1</div>
  <div class="header">标题2</div>
  <div class="cell">内容A</div>
  <div class="cell">内容B</div>
</div>

.grid-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  gap: 1px;
  background-color: #ddd; /* 模拟边框 */
}

.header, .cell {
  padding: 12px;
  background-color: white; /* 内容区域背景 */
}

.header {
  font-weight: bold;
  background-color: #f2f2f2;
}

使用 Flexbox 实现表格

Flexbox 适合动态宽度的表格布局，但需要手动处理行列对齐：

<div class="flex-table">
  <div class="row">
    <div class="col">标题1</div>
    <div class="col">标题2</div>
  </div>
  <div class="row">
    <div class="col">内容A</div>
    <div class="col">内容B</div>
  </div>
</div>

.flex-table {
  width: 100%;
}

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

.col {
  flex: 1;
  padding: 12px;
}

.row:first-child .col {
  font-weight: bold;
  background-color: #f2f2f2;
}

表格样式增强技巧

• 悬停效果：添加 tr:hover { background-color: #efefef; } 高亮行。
• 固定表头：通过 position: sticky 实现滚动时表头固定：

  thead th {
    position: sticky;
    top: 0;
  }

• 响应式表格：在小屏幕下隐藏非关键列或改为堆叠布局：

  @media (max-width: 600px) {
    td:nth-child(2), th:nth-child(2) {
      display: none;
    }
  }

选择方法时，若需语义化且兼容性高，推荐原生表格；若需灵活布局，可使用 Grid 或 Flexbox。