css - HTML テーブルの配置は双方向

Question

私は2つの列を持つテーブルを持っています:

<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各行の 2 番目を取得し、text-alignCSS プロパティを右揃えに設定します。

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

もちろん、クラスをテーブルとこのルールに追加して、この方法で整列させたい特定のテーブルにのみ適用することができます (おそらくそうするべきです)。

これを使用して、2 番目の列のセルを選択することもできます。

td:nth-child(2)

ただし、これは CSS3 プロパティであるため、最初の例ほど広くサポートされていないことに注意してください。

Answer 2

CSS:

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

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

これらは CSS3 セレクターであるため、古いブラウザーではそのままでは機能しないことに注意してください。

Answer 3

これには複数の方法があります。:first-child1 つは、および:last-child疑似クラスを使用することです。

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

フィドルの例

Answer 4

使用クラス:

td.leftSide {
    text-align:left;
}

td.rightSide {
    text-align:right;
}