如何使用CSS Grid实现带圆角与合并边框的响应式表格

要实现满足所有需求的响应式网格表格，我们可以通过 CSS Grid 结合少量 JavaScript 解决空白红块和圆角边框的问题，具体实现如下：

完整代码 #

<div class="grid">
  <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>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: 100px;
  gap: 0;
  background: green; /* 空白区域与单元格背景保持一致，避免红块 */
  border-radius: 15px; /* 表格整体圆角 */
  padding: 0 10px 10px 0; /* 填补最后一行/列的边框空白 */
  overflow: hidden; /* 裁剪内部元素，保证圆角生效 */
  width: 100%;
  max-width: 800px; /* 可选，限制最大宽度 */
  margin: 0 auto;
}

.grid__item {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  border-left: 10px solid red; /* 单元格左边框 */
  border-top: 10px solid red; /* 单元格上边框 */
  border-radius: 5px; /* 单元格自身圆角（可选） */
}

/* 第一行元素去掉上边框 */
.grid__item:nth-child(-n + var(--columns)) {
  border-top: none;
}

/* 第一列元素去掉左边框 */
.grid__item:nth-child(var(--columns)n + 1) {
  border-left: none;
}
</style>

<script>
// 计算当前网格列数并设置CSS变量
function setGridColumns() {
  const grid = document.querySelector('.grid');
  if (!grid) return;
  const computedStyle = window.getComputedStyle(grid);
  const columnWidth = parseFloat(computedStyle.gridTemplateColumns.split(' ')[0]);
  const gridWidth = parseFloat(computedStyle.width);
  const columns = Math.floor(gridWidth / columnWidth);
  grid.style.setProperty('--columns', columns);
}

// 初始化和监听窗口变化
setGridColumns();
window.addEventListener('resize', setGridColumns);
</script>

关键实现说明 #

1. 响应式行列调整：通过 repeat(auto-fill, minmax(100px, 1fr)) 实现，容器宽度变化时自动增减列数，剩余空间会均匀分配给每行元素，满足宽度微调需求。
2. 解决空白红块问题：将容器背景设为单元格背景色（绿色），仅通过单元格的左、上边框实现分隔线，空白区域不再显示红色背景。
3. 整体圆角效果：容器设置 border-radius + overflow: hidden，裁剪内部元素的边框，保证表格整体呈现圆角。
4. 边框合并效果：给单元格添加左、上边框后，移除第一行的上边框和第一列的左边框，实现类似表格 border-collapse 的单条分隔线效果。

补充说明 #

• 若不需要单元格自身的圆角，可去掉 .grid__item 中的 border-radius 属性。
• 调整边框宽度时，同步修改 border-left/border-top 的宽度和容器的 padding 值即可。

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