能否在HTML中逐行交错展示列宽独立的两组表格数据？

需求说明 #

需要将两组表格数据合并到单个HTML表格中，实现逐行交错展示；同时要求两组数据的列宽相互独立，仅整体表格的总宽度（最后一列对齐）保持一致。

原表格样式说明 #

第一组表格 #

为紧凑列宽样式，包含3列，各列宽度占比较小，示例数据如下：

第二组表格 #

为宽松列宽样式，同样包含3列，各列宽度占比更大，示例数据如下：

期望效果 #

最终表格中两组数据行交替出现，第一组行保持紧凑列宽，第二组行保持宽松列宽，所有行的最右侧列对齐，整体表格总宽度统一。

实现代码 #

通过直接为每行的单元格设置独立宽度样式，即可实现需求：

<table style="width: 100%; border-collapse: collapse;">
  <!-- 第一组数据行1 -->
  <tr>
    <td style="width: 15%; border: 1px solid #ccc; padding: 8px;">数据1-1</td>
    <td style="width: 25%; border: 1px solid #ccc; padding: 8px;">数据1-2</td>
    <td style="width: 60%; border: 1px solid #ccc; padding: 8px;">数据1-3</td>
  </tr>
  <!-- 第二组数据行1 -->
  <tr>
    <td style="width: 30%; border: 1px solid #ccc; padding: 8px;">数据2-1</td>
    <td style="width: 40%; border: 1px solid #ccc; padding: 8px;">数据2-2</td>
    <td style="width: 30%; border: 1px solid #ccc; padding: 8px;">数据2-3</td>
  </tr>
  <!-- 第一组数据行2 -->
  <tr>
    <td style="width: 15%; border: 1px solid #ccc; padding: 8px;">数据1-4</td>
    <td style="width: 25%; border: 1px solid #ccc; padding: 8px;">数据1-5</td>
    <td style="width: 60%; border: 1px solid #ccc; padding: 8px;">数据1-6</td>
  </tr>
  <!-- 第二组数据行2 -->
  <tr>
    <td style="width: 30%; border: 1px solid #ccc; padding: 8px;">数据2-4</td>
    <td style="width: 40%; border: 1px solid #ccc; padding: 8px;">数据2-5</td>
    <td style="width: 30%; border: 1px solid #ccc; padding: 8px;">数据2-6</td>
  </tr>
</table>

方案说明 #

1. 表格整体设置width: 100%确保总宽度一致，border-collapse: collapse优化边框显示效果
2. 针对每组数据的行，单独为每个<td>设置width属性，实现两组列宽的独立控制
3. 每行的单元格宽度占比之和为100%，保证整体表格宽度统一，同时让最后一列自然对齐

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