如何使用 HTML 代码实现表格特定列的右对齐？

表格对齐问题

在编写 html 表格时，有时需要让某些列向右对齐，以呈现更加整齐美观的视觉效果。

例如，以下代码是一个简单的表格：

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>first</th>
      <th>last</th>
      <th>handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>mark</td>
      <td>otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>jacob</td>
      <td>thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th>3</th>
      <td>larry</td>
      <td>the bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

在这个表格中，我们希望将最后两列（"last" 和 "handle"）向右对齐。

为了实现这个效果，可以采用以下方式：

1. 设置表格宽度为 100%：这将确保表格占据整个可用空间。
2. 为 1、3、4 列设置固定宽度：这将确保这些列的宽度保持不变。
3. 不为 2 列设置宽度：这将允许 2 列根据其内容自动调整宽度。

修改后的 html 代码如下：

<table>
  <thead>
    <tr>
      <th width="50px">#</th>
      <th>First</th>
      <th width="300px">Last</th>
      <th width="200px">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

通过这些调整，最后两列将完美地向右对齐。