CSS 如何在第一列应用文本对齐居左，而在其他列应用文本对齐居右

在本文中，我们将介绍如何使用CSS样式将表格的第一列文本对齐居左，而其他列的文本对齐居右。这在设计网页布局和展示数据时非常有用。

阅读更多：CSS 教程

使用text-align属性对齐文本

在CSS中，我们可以使用text-align属性来实现文本的对齐。text-align属性可以应用于元素的内容，通常用于表格、段落、标题和列表等。text-align属性可取的值有left、right、center和justify。

应用text-align:left到第一列

要将表格的第一列文本对齐居左，我们可以通过给表格中的第一列元素指定一个类名，并将该类名与text-align:left样式规则关联来实现。下面是一个示例代码：

<style>
    .align-left {
        text-align: left;
    }
</style>
<table>
    <tr>
        <td class="align-left">第一列</td>
        <td>第二列</td>
        <td>第三列</td>
    </tr>
    <tr>
        <td class="align-left">第一列</td>
        <td>第二列</td>
        <td>第三列</td>
    </tr>
    <tr>
        <td class="align-left">第一列</td>
        <td>第二列</td>
        <td>第三列</td>
    </tr>
</table>

在上面的示例中，我们通过给第一列的td元素添加了一个类名”align-left”，并将该类名与text-align:left样式关联起来。这样，表格的第一列的文本就会被对齐到左侧。

应用text-align:right到其他列

要将表格的其他列文本对齐到右侧，我们可以使用CSS的选择器来选择除第一列外的其他列元素，并将其与text-align:right样式规则关联。下面是一个示例代码：

<style>
    table tr td:not(:first-child) {
        text-align: right;
    }
</style>
<table>
    <tr>
        <td class="align-left">第一列</td>
        <td>第二列</td>
        <td>第三列</td>
    </tr>
    <tr>
        <td class="align-left">第一列</td>
        <td>第二列</td>
        <td>第三列</td>
    </tr>
    <tr>
        <td class="align-left">第一列</td>
        <td>第二列</td>
        <td>第三列</td>
    </tr>
</table>

在上面的示例中，我们使用:not(:first-child)选择器选择了除第一列外的其他列元素，并将其与text-align:right样式关联起来。这样，表格的其他列的文本就会被对齐到右侧。