如何在表格中添加行间距？模拟LinkedIn动态墙遇布局难题

我之前也尝试过用表格做类似的信息流布局，确实会遇到行间距没法透出背景的问题，下面给你两个解决方案，其中第二个是更优的实践方向：

方案1：调整表格CSS属性让行间距透出背景 #

表格默认的border-collapse: collapse会让行和单元格无缝贴合，所以背景色没法在行间显示。我们可以通过修改这两个属性来解决：

1. 设置表格的border-collapse: separate，取消单元格合并
2. 用border-spacing设置行与行之间的垂直间距（第二个值对应垂直间距）
3. 给每个表格行（tr）设置卡片背景色，这样行间的空隙就会显示页面的背景色

示例代码：

/* 页面背景，模拟LinkedIn的浅灰背景 */
body {
  background-color: #f3f2ef;
  margin: 0;
  padding: 20px;
}

/* 动态墙表格 */
.feed-table {
  border-collapse: separate;
  border-spacing: 0 12px; /* 左右间距0，上下间距12px */
  width: 100%;
  max-width: 650px; /* 限制宽度，和LinkedIn一致 */
  margin: 0 auto;
}

/* 每个动态行的卡片样式 */
.feed-table tr {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 单元格内部留白，去掉默认边框 */
.feed-table td {
  padding: 16px;
  border: none;
}

对应的HTML结构：

<table class="feed-table">
  <tr>
    <td>
      <div>
        <h4>张三</h4>
        <p>分享了一篇文章：如何优化前端性能...</p>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>
        <h4>李四</h4>
        <p>发布了一张工作照片：今天完成了项目上线！</p>
      </div>
    </td>
  </tr>
</table>

方案2：放弃表格，用现代布局（更优解） #

其实LinkedIn的动态墙本质是流式内容列表，表格是为结构化数据设计的，用表格来模拟会有语义化问题，而且后期扩展（比如添加侧边栏、响应式调整）会很麻烦。推荐用flex或者grid布局来实现，天然支持间距控制：

示例代码（flex布局）：

body {
  background-color: #f3f2ef;
  margin: 0;
  padding: 20px;
}

/* 动态墙容器 */
.feed-container {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 动态项之间的间距，直接控制 */
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
}

/* 单个动态卡片 */
.feed-post {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 16px;
}

对应的HTML结构：

<div class="feed-container">
  <div class="feed-post">
    <h4>张三</h4>
    <p>分享了一篇文章：如何优化前端性能...</p>
  </div>
  <div class="feed-post">
    <h4>李四</h4>
    <p>发布了一张工作照片：今天完成了项目上线！</p>
  </div>
</div>

为什么这个方案更优？ #

• 语义化正确：div容器+卡片的结构更符合信息流的内容语义，搜索引擎和屏幕阅读器会更好理解
• 布局更灵活：后续要加侧边栏、调整响应式布局（比如移动端堆叠），只需要修改少量CSS，不需要纠结表格的特殊属性
• 维护成本低：代码逻辑更清晰，团队其他成员更容易接手维护

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