CSS 如何使用 CSS 将表格的最后两列右对齐

在本文中，我们将介绍如何使用 CSS 来将表格的最后两列右对齐。通过这种方法，您可以轻松控制表格中最后两列的对齐方式，使其符合您的设计需求。

阅读更多：CSS 教程

示例表格

我们首先创建一个示例表格，以便展示如何将最后两列右对齐。这是一个包含五行和五列的表格，最后两列需要右对齐。以下是示例表格的代码：

<table>
   <tr>
      <th>表头 1</th>
      <th>表头 2</th>
      <th>表头 3</th>
      <th>表头 4</th>
      <th>表头 5</th>
   </tr>
   <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
      <td>Data 5</td>
   </tr>
   <tr>
      <td>Data 6</td>
      <td>Data 7</td>
      <td>Data 8</td>
      <td>Data 9</td>
      <td>Data 10</td>
   </tr>
   <tr>
      <td>Data 11</td>
      <td>Data 12</td>
      <td>Data 13</td>
      <td>Data 14</td>
      <td>Data 15</td>
   </tr>
   <tr>
      <td>Data 16</td>
      <td>Data 17</td>
      <td>Data 18</td>
      <td>Data 19</td>
      <td>Data 20</td>
   </tr>
</table>

以上是一个基本的包含数据的表格。接下来，我们将使用 CSS 来将最后两列右对齐。

使用 CSS 进行最后两列的右对齐

要将表格的最后两列右对齐，我们需要使用 CSS 中的 :nth-child 选择器来选中这两列，并设置它们的样式。以下是将表格最后两列右对齐的 CSS 代码：

table td:nth-child(4),
table th:nth-child(4),
table td:nth-child(5),
table th:nth-child(5) {
   text-align: right;
}

以上代码中，我们使用了 :nth-child 选择器来选中表格中的第四列和第五列（td:nth-child(4), td:nth-child(5)）。然后，我们将这两列的文本对齐方式设置为右对齐（text-align: right）。同样的样式也被应用到了表头（th）和数据单元格（td）上。

现在，我们刷新页面，可以看到表格的最后两列已经右对齐了。

自定义样式

除了简单地将最后两列右对齐，您还可以根据自己的需求自定义它们的样式。例如，您可以设置不同的文本颜色、背景颜色或字体样式。以下是一个自定义样式的示例：

table td:nth-child(4),
table th:nth-child(4),
table td:nth-child(5),
table th:nth-child(5) {
   text-align: right;
   color: blue;
   background-color: lightgray;
   font-weight: bold;
}

在上述示例中，我们除了将最后两列右对齐，还设置了文本颜色为蓝色、背景颜色为浅灰色，并将字体加粗。

您可以根据您的设计需求调整这些样式属性，使其适应您的页面。