Question

我有一个包含两列的表格：

<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>

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

Answer 1

以下CSS将在每一行中使用第二个td，并将text-align CSS属性设置为右对齐。

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

您当然可以（也可能应该）在您的表和此规则中添加一个类，以便它仅适用于您希望以这种方式对齐的特定表。

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

td:nth-child(2)

但请记住，因为它是一个CSS3属性，所以它不像我的第一个例子那样受到广泛支持。

Answer 2

使用课程：

td.leftSide {
    text-align:left;
}

td.rightSide {
    text-align:right;
}

Answer 3

CSS：

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

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

请注意，这些是CSS3选择器，因此在旧版浏览器上不能正常工作。

Answer 4

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

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

Example Fiddle

HTML表格两种方式对齐

4 个答案: