1

我有一个有两列的表：

<table border="1" bordercolor="#FFCC00" style="background-color:#FFFFCC" width="250" cellpadding="3" cellspacing="3">
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
</table>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/html_table_tutorial.cfm" target="_top">HTML Tables</a></p>

我的文字有问题。如何将左侧文本与左侧对齐，将右侧文本与右侧对齐？还有其他方法吗？

4

4 回答 4

5

下面的 CSS 将采用td每行中的第二个并将text-alignCSS 属性设置为向右对齐。

td:first-child+td {
    text-align: right;
}

您当然可以（并且可能应该）向您的表格和此规则添加一个类，以便它仅适用于您要以这种方式对齐的特定表格。

您还可以使用它来选择第二列中的单元格：

td:nth-child(2)

但请记住，由于它是一个 CSS3 属性，它不像我的第一个示例那样被广泛支持。

于 2012-12-20T13:06:34.603 回答
1

CSS：

table tr td:first-child {
    text-align:left;
}

table tr td:nth-child(1) { // or :last-child
    text-align:right;
}

请注意，这些是 CSS3 选择器，因此不能在旧浏览器上按原样工作。

于 2012-12-20T13:08:36.457 回答
0

使用类：

td.leftSide {
    text-align:left;
}

td.rightSide {
    text-align:right;
}
于 2012-12-20T13:07:04.413 回答
0

有多种方法可以做到这一点。一种是使用:first-child和:last-child伪类：

td:last-child {
    text-align: right;
}
td:first-child {
    text-align: left;
}

示例小提琴

于 2012-12-20T13:10:43.923 回答