如何用HTML和CSS实现列内行高不均的表格布局？

方案1：用表格实现（适合数据类布局） #

表格的行元素(<tr>)无法直接通过margin调整间距，需要通过单元格(<td>)的内边距(padding)或行高(line-height)来控制行内内容的间距。给不同行添加类名，针对性设置样式即可：

<table>
  <tr class="row-spacer-large">
    <td>大间距行内容</td>
  </tr>
  <tr class="row-spacer-small">
    <td>小间距行内容</td>
  </tr>
  <tr class="row-spacer-medium">
    <td>中等间距行内容</td>
  </tr>
</table>

table {
  width: 100%;
  border-collapse: collapse; /* 可选，按需决定是否合并边框 */
}

td {
  border: 1px solid #ddd; /* 可视化边框，可移除 */
}

/* 大间距行 */
.row-spacer-large td {
  padding: 22px 12px; /* 上下内边距控制行内高度 */
}

/* 小间距行 */
.row-spacer-small td {
  padding: 6px 12px;
}

/* 中等间距行 */
.row-spacer-medium td {
  padding: 14px 12px;
}

如果需要行与行之间的空隙而非行内内容间距，可设置border-collapse: separate和border-spacing：

table {
  border-collapse: separate;
  border-spacing: 0 10px; /* 第二个值是行之间的垂直间距 */
}

方案2：用区块元素实现（适合非数据类布局，更灵活） #

如果不是严格的数据表格，用<div>等区块元素搭配CSS会更自由，直接通过padding或margin控制每个区块的内/外间距：

<div class="block-container">
  <div class="block block-large">大间距区块</div>
  <div class="block block-small">小间距区块</div>
  <div class="block block-medium">中等间距区块</div>
</div>

.block-container {
  width: 100%;
}

.block {
  border: 1px solid #ddd;
  margin-bottom: 8px; /* 区块之间的外部间距 */
}

.block-large {
  padding: 28px; /* 内部间距控制区块高度 */
}

.block-small {
  padding: 10px;
}

.block-medium {
  padding: 18px;
}

常见问题说明 #

之前尝试无效大概率是因为直接给<tr>设置margin——表格元素的盒模型规则特殊，margin对<tr>不生效，必须通过单元格的内边距或行高来调整行内内容的间距；若用区块元素则无此限制，直接设置内/外边距即可。

内容的提问来源于stack exchange，提问作者Kearen Samsel