如何使用HTML/CSS实现带自定义间距和圆角的3列表格

用CSS Grid布局可以快速实现你要的带特殊间距的3列表格效果，不需要手动绘制矩形和直线，空白区域不会有多余元素遮挡单元格交互，实现逻辑也更清晰：

第一步：调整HTML结构 #

把所有单元格放在同一个父容器下，删除每个单元格额外套的外层div：

<div class="custom-table">
  <!-- 表头行 3列 -->
  <div class="table-cell header">表头1</div>
  <div class="table-cell header">表头2</div>
  <div class="table-cell header">表头3</div>
  <!-- 内容行 按3列自动排列 -->
  <div class="table-cell">内容1</div>
  <div class="table-cell">内容2</div>
  <div class="table-cell">内容3</div>
  <div class="table-cell">内容4</div>
  <div class="table-cell">内容5</div>
  <div class="table-cell">内容6</div>
  <!-- 按需添加更多单元格即可 -->
</div>

第二步：添加自定义CSS样式 #

你可以根据设计需求调整间距、边框、背景色等参数：

.custom-table {
  /* 开启Grid布局 */
  display: grid;
  /* 定义3列，默认每列宽度均分，也可自定义固定宽度比如100px 200px 150px */
  grid-template-columns: repeat(3, 1fr);
  /* 自定义行间距、列间距数值，匹配你的设计要求 */
  row-gap: 12px;
  column-gap: 16px;
  /* 表格外层内边距按需设置 */
  padding: 20px;
}
.table-cell {
  /* 单元格基础样式 */
  padding: 10px 14px;
  border: 1px solid #ccc;
  background: #fff;
  /* 单元格内文字排版按需调整 */
  display: flex;
  align-items: center;
}
/* 表头特殊样式按需自定义 */
.table-cell.header {
  font-weight: bold;
  background: #f5f5f5;
  border-color: #999;
}

特殊效果适配 #

如果需要实现单元格跨行/跨列效果，只需给对应单元格添加对应样式即可：

• 跨2列：grid-column: span 2;
• 跨2行：grid-row: span 2;

你当前的代码每个单元格都单独套了外层容器，会导致布局无法统一控制，只需要把所有单元格的内层div移到同一个父容器下，删除多余的外层div，套用上述Grid样式即可实现目标效果。

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