当前位置：首页 > CSS

css制作三行三列表格

2026-01-08 20:46:44CSS

使用HTML和CSS创建三行三列表格

通过HTML的<table>标签结合CSS样式可以轻松实现三行三列的表格结构。

<table class="three-by-three">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
  <tr>
    <td>单元格7</td>
    <td>单元格8</td>
    <td>单元格9</td>
  </tr>
</table>

.three-by-three {
  border-collapse: collapse; /* 合并边框 */
  width: 300px; /* 可选宽度 */
}

.three-by-three td {
  border: 1px solid #000; /* 单元格边框 */
  padding: 10px; /* 内边距 */
  text-align: center; /* 文字居中 */
}

使用CSS Grid布局创建表格

通过CSS Grid实现类似表格的布局，适合非表格数据的展示。

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
  gap: 10px; /* 单元格间距 */
  width: 300px;
}

.grid-item {
  border: 1px solid #000;
  padding: 10px;
  text-align: center;
}

使用Flexbox实现表格效果

通过Flexbox布局模拟表格结构，适合需要响应式调整的场景。

<div class="flex-container">
  <div class="flex-row">
    <div class="flex-cell">1</div>
    <div class="flex-cell">2</div>
    <div class="flex-cell">3</div>
  </div>
  <div class="flex-row">
    <div class="flex-cell">4</div>
    <div class="flex-cell">5</div>
    <div class="flex-cell">6</div>
  </div>
  <div class="flex-row">
    <div class="flex-cell">7</div>
    <div class="flex-cell">8</div>
    <div class="flex-cell">9</div>
  </div>
</div>

.flex-container {
  width: 300px;
}

.flex-row {
  display: flex;
}

.flex-cell {
  flex: 1; /* 等分宽度 */
  border: 1px solid #000;
  padding: 10px;
  text-align: center;
}

表格样式增强

为表格添加斑马纹效果和悬停高亮：

/* 斑马纹 */
.three-by-three tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 悬停效果 */
.three-by-three tr:hover {
  background-color: #ddd;
}

响应式表格处理

针对移动设备调整表格显示方式：

css制作三行三列表格

@media (max-width: 600px) {
  .three-by-three {
    display: block;
  }
  .three-by-three tr {
    display: block;
    margin-bottom: 10px;
  }
  .three-by-three td {
    display: block;
    text-align: right;
  }
  .three-by-three td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}