表格行间距设置无效及Border-radius不生效问题求助

问题根源 #

• 表格<tr>元素受表格布局规则限制，margin属性对tr完全无效，表格布局会自动管控单元格间的间距，margin无法突破这套规则。
• <tr>上设置border-radius不生效，因为tr本身没有独立的背景渲染区域，背景实际由内部<td>元素填充，td的矩形背景会直接覆盖tr的圆角设置。

具体修复方案 #

方案1：基于原生表格实现需求 #

实现行间距

给表格设置border-collapse: separate开启独立边框模式，再通过border-spacing控制行垂直间距：

.order-table {
  border-collapse: separate; /* 必须设置为separate，不能用默认的collapse */
  border-spacing: 0 10px; /* 第二个值为行之间的垂直间距，按需调整 */
  width: 100%;
}

实现行圆角

给每行的首尾单元格分别设置左右圆角，同时让td背景透明以显示tr的背景色：

.order-table tr {
  background-color: #f8f8f8; /* 行背景色 */
}
/* 首单元格设置左圆角 */
.order-table tr td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
/* 尾单元格设置右圆角 */
.order-table tr td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.order-table tr td {
  background-color: transparent; /* 让td背景透明，露出tr的背景与圆角 */
  padding: 12px; /* 增加内边距优化排版 */
}

方案2：用div模拟表格（更灵活） #

如果原生表格的限制过多，直接将每行改为div容器，用flex/grid布局模拟表格，这样margin和border-radius可直接生效：

<!-- 替代原生表格的结构 -->
<div class="order-container">
  <?php while ($row = $result->fetch_assoc()) : ?>
    <div class="order-row">
      <div class="order-cell"><?php echo $row['order_id']; ?></div>
      <div class="order-cell"><?php echo $row['customer_name']; ?></div>
      <!-- 其他订单列 -->
    </div>
  <?php endwhile; ?>
</div>

对应CSS：

.order-container {
  width: 100%;
}
.order-row {
  display: flex;
  background-color: #f8f8f8;
  border-radius: 8px;
  margin-bottom: 10px; /* 直接用margin控制行间距 */
  padding: 12px;
}
.order-cell {
  flex: 1; /* 等分宽度，可根据需求单独设置宽度 */
}

注意事项 #

• 原生表格方案中，必须保持border-collapse: separate，否则border-spacing和圆角设置都会失效。
• 不要给td设置背景色，否则会覆盖tr的背景与圆角效果。

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