Is there a way to set the text alignment of entire column in a table?

Question

Is there a simple way to set the text alignment of all cells in the second column to right?

Or is the only way is to set the alignment for each cell in

Answer 1

I believe that the following would work and not require annotating the second cell of each row with a class.

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

This rule would select a td immediately following a td that is the first child of its parent. In a typical table this would select the second cell in each row.

Answer 2

Adding a class to every cell or cell in a row in second column will work.

.second {
   text-align: right;
}

or

add class to tr and add the following css in your style sheet.

tr.second {
   text-align: right;
}

Answer 3

I think this is the simplest way: If you have a three column table & a footer of two cell like me then you can apply the below rule:

tr td:nth-child(3),tfoot tr td:nth-child(2){
    text-align:center;
}

I know this is very old question. But as a beginner, sometimes ago I faced the same problem & I have solved this like this way.

Answer 4

While not particularly elegant, I like to toss something like this in my site-wide css file:

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

Then just specify which column numbers you want center or right aligned, i.e. if you want column 2 & 7 right aligned, and 3 centered, just do:

<table class="tr2 tc3 tr7">

While the CSS isn't super elegant, the alternatives are even less elegant: i.e. a custom class for each table, or requiring each tr to have a class="ralign" or similar.

Doesn't work with IE8

Answer 5

Add a class to every cell in the 2nd column.

.second {
   text-align: right;
}

You could also use CSS3.

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

(It won't work in <= IE8)

Answer 6

Bit late to the party, but I just had this issue myself so thought I'd share a resolution. It's worth noting that this answer is only applicable if you are using LESS.

Instead of having to manually add the class or style to each cell you can use loops in LESS to create a range of classes that you can apply to your tables:

// 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);

This will produce a load of classes such as .table-center-col-1 all the way up to .table-center-col-16 (in this example) and they will make center the text of the applicable column. It will also do the same for right-aligned text, with .table-right-col-n.

You can adjust the number supplied (from 16) to anything to ensure that it covers you for the max amount of columns you may have in a table. For variable column numbers this won't be much help to you.

Then all you have to do is apply it to the table:

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

All of the cells in the 4th column will now have centered text.