web-dev-qa-db-ja.com

テーブル内の列全体のテキスト配置を設定する方法はありますか？

2列目のすべてのセルのテキスト配置をrightに設定する簡単な方法はありますか？

または、列内の各セルの配置を設定することが唯一の方法ですか？

（残念ながら、alignタグのcol属性はFirefoxではサポートされていません。）

htmlcssfirefoxalignmentcss-tables
45
Misha Moroshko

2列目のすべてのセルにクラスを追加します。

.second {
   text-align: right;
}

CSS3を使用することもできます。

tr td:nth-child(2) { /* I don't think they are 0 based */
   text-align: right;
}

（<= IE8では動作しません）

44
alex

特にエレガントではありませんが、サイト全体のcssファイルで次のようなものを投げたいです。

.tr1 td:nth-child(1), .tr1 th:nth-child(1),
.tr2 td:nth-child(2), .tr2 th:nth-child(2),
.tr3 td:nth-child(3), .tr3 th:nth-child(3),
.tr4 td:nth-child(4), .tr4 th:nth-child(4),
.tr5 td:nth-child(5), .tr5 th:nth-child(5),
.tr6 td:nth-child(6), .tr6 th:nth-child(6),
.tr7 td:nth-child(7), .tr7 th:nth-child(7),
.tr8 td:nth-child(8), .tr8 th:nth-child(8),
.tr9 td:nth-child(9), .tr9 th:nth-child(9) { text-align:right }

.tc1 td:nth-child(1), .tc1 th:nth-child(1),
.tc2 td:nth-child(2), .tc2 th:nth-child(2),
.tc3 td:nth-child(3), .tc3 th:nth-child(3),
.tc4 td:nth-child(4), .tc4 th:nth-child(4),
.tc5 td:nth-child(5), .tc5 th:nth-child(5),
.tc6 td:nth-child(6), .tc6 th:nth-child(6),
.tc7 td:nth-child(7), .tc7 th:nth-child(7),
.tc8 td:nth-child(8), .tc8 th:nth-child(8),
.tc9 td:nth-child(9), .tc9 th:nth-child(9) { text-align:center }

次に、中央または右揃えにする列番号を指定します。つまり、列2と7を右揃えにし、3を中央揃えにする場合は、次のようにします。

<table class="tr2 tc3 tr7">

CSSはそれほどエレガントではありませんが、代替はさらにエレガントではありません。つまり、各テーブルのカスタムクラス、または各trにclass="ralign" または類似。

IE8では動作しません

14
Stephen Fuhry

私は、次のように機能し、各行の2番目のセルにクラスを注釈する必要がないと信じています。

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

このルールは、親の最初の子であるtdの直後にtdを選択します。典型的なテーブルでは、これは各行の2番目のセルを選択します。

14
smarcaurele

パーティーに少し遅れましたが、私はこの問題を自分で抱えていたので、解決策を共有すると思いました。 [〜＃〜] less [〜＃〜] を使用している場合にのみ、この回答が適用されることに注意してください。

クラスまたはスタイルを各セルに手動で追加する代わりに、LESSでループを使用して、テーブルに適用できるクラスの範囲を作成できます。

// Loop for @i until @i = @n
// Much like - for($i=0; $i<=$n; $i++)
//
.table-cols(@n, @i: 1) when (@i =< @n)
{
    .table-center-col-@{i}
    {
        tr > td:nth-child(@{i})
        {
            text-align: center;
        }
    }

    .table-right-col-@{i}
    {
        tr > td:nth-child(@{i})
        {
            text-align: right;
        }
    }

    // Continue the iteration
    .table-cols(@n, (@i + 1));
}

.table-cols(16);

これにより、.table-center-col-1から.table-center-col-16（この例では）までのクラスのロードが生成され、該当する列のテキストが中央に配置されます。 .table-right-col-nを使用して、右揃えのテキストにも同じことを行います。

提供される数（16から）を任意に調整して、テーブル内の最大列数に対応できるようにすることができます。可変列番号の場合、これはあまり役に立ちません。

次に、テーブルに適用するだけです。

<table class="table-center-col-4">
    <thead>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>x</td>
            <td>x</td>
            <td>x</td>
            <td>x</td>
            <td>x</td>
        </tr>
    </tbody>
</table>

これで、4列目のすべてのセルのテキストが中央揃えになります。

1
Luke

すべてのセルまたは2列目の行のセルにクラスを追加すると機能します。

.second {
   text-align: right;
}

または

クラスをtrに追加し、スタイルシートに次のcssを追加します。

tr.second {
   text-align: right;
}
0
Vijender Reddy