如何让三列HTML表格某一行仅显示两个居中分隔的单元格？

要实现你要的效果，核心思路是让目标行的单元格平分表格总宽度，同时保留中间的分隔线，具体可以通过跨列单元格+内部布局来完成，以下是完整代码示例：

HTML 结构 #

<table>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <!-- 需要特殊显示的行 -->
  <tr class="two-cell-row">
    <td colspan="3">
      <div class="cell">aaa</div>
      <div class="cell">bbb</div>
    </td>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

CSS 样式 #

/* 基础表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
}
td {
  border: 1px solid #000;
  padding: 8px;
  text-align: center;
}

/* 特殊行的样式 */
.two-cell-row td {
  padding: 0; /* 去掉单元格默认内边距，让内部div占满 */
}
.cell {
  display: inline-block;
  width: 50%;
  padding: 8px;
  box-sizing: border-box; /* 确保内边距不影响宽度计算 */
}
.cell:last-child {
  border-left: 1px solid #000; /* 添加中间分隔线 */
}

效果说明 #

1. 用 <td colspan="3"> 让目标行的单元格跨满整个表格宽度
2. 在跨列单元格内放置两个 <div>，通过 width: 50% 让它们平分宽度
3. 给右侧div添加左边框，模拟单元格分隔线，确保分隔线位于表格正中间
4. 保留表格原有边框样式，保证整体视觉统一

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