如何在动态列的HTML表格中将td置于行末尾？

解决方案：纯CSS实现动态列表格行末尾对齐 #

因为表格列数动态且无法使用JavaScript，我们可以通过CSS Flex布局改造目标行，无需依赖colspan或空<td>：

1. 标记目标行：给需要将单元格放在末尾的行添加自定义类（比如.end-aligned-row）
2. CSS布局调整：将目标行改为Flex容器，利用margin-left: auto将单元格推至行尾

示例代码

修改后的HTML

<div class="s-table-container">
  <table class="s-table">
    <thead>
      <tr>
        <th>name</th>
        <th>age</th>
        <th>salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>john</td>
        <td>20</td>
        <td>1000</td>
      </tr>
      <tr>
        <td>mike</td>
        <td>35</td>
        <td>2000</td>
      </tr>
      <tr>
        <td>jessica</td>
        <td>23</td>
        <td>1100</td>
      </tr>
      <!-- 添加自定义类标记目标行 -->
      <tr class="end-aligned-row">
        <td>status</td>
        <td>ok</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="s-table-container">
  <table class="s-table">
    <thead>
      <tr>
        <th>first name</th>
        <th>last name</th>
        <th>age</th>
        <th>salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>john</td>
        <td>smith</td>
        <td>20</td>
        <td>1000</td>
      </tr>
      <tr>
        <td>mike</td>
        <td>doe</td>
        <td>35</td>
        <td>2000</td>
      </tr>
      <tr>
        <td>jessica</td>
        <td>black</td>
        <td>23</td>
        <td>1100</td>
      </tr>
      <!-- 添加自定义类标记目标行 -->
      <tr class="end-aligned-row">
        <td>status</td>
        <td>ok</td>
      </tr>
    </tbody>
  </table>
</div>

对应的CSS

.s-table {
  width: 100%;
  border-collapse: collapse;
}

.s-table th, .s-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

/* 改造目标行的布局 */
.s-table .end-aligned-row {
  display: flex;
  width: 100%;
}

/* 将目标行的单元格推至末尾 */
.s-table .end-aligned-row td {
  margin-left: auto;
  /* 保持与其他单元格一致的样式 */
  border: inherit;
  padding: inherit;
}

原理说明

• 把目标行的display从默认的table-row改为flex，使其成为Flex容器
• 给目标行的单元格设置margin-left: auto，Flex布局会自动将这些元素推到容器的最右侧
• 无需提前知道表格列数，完全适配动态列的场景，且不需要JavaScript介入

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