Better way to right align text in HTML Table

user_73630 0
Viewed 160857

I have an HTML table with large number of rows, and I need to right align one column.

I know the following ways, 

<tr><td>..</td><td>..</td><td align='right'>10.00</td><tr>

and

<tr><td>..</td><td>..</td><td class='right-align-class'>10.00</td><tr>

In both the methods, I have to repeat the align or class parameter on every <tr> tag. (If there are 1000 rows, I have to put align='right' or class='right-align-class' 1000 times.)

Is there any efficient way to do this ? Is there any direct way to say, align the third column in all rows to right ?

css html
13 Answers

HTML5 messed up the col attribute functionality...

It is really uncool that HTML5 deprecated most of the col attributes and did not add the support for the style and class attributes. Modern browsers still holds support for its width attribute, but not for others. The width support will probably hold as it is used in table layout render algorithm.

...which can be fixed by defining CSS class series...

To achieve similar functionality without the need of editing every row, it can be achieved by defining

.right-1 td:nth-child(1),
.right-2 td:nth-child(2),
.right-3 td:nth-child(3),
.right-4 td:nth-child(4),
.right-5 td:nth-child(5), ...
  { text-align: right; }

which can be a single line with help of some CSS preprocessor / generator, but still acceptable without it as most web tables has reasonable number of columns. Then to right-align the third column, you can just

<table class="right-3">
...
</table>

...but it is just a poor hack :-(

CSS classes should hold the semantics. If they imply particular styles (like in the example above), it is semantically just legalized inline style attribute, merging the HTML with the design (CSS should separate it). This is what Bootstrap styles do, and this is what you should avoid if possible.

user_3437210

Following up on this excellent description, here's a complete solution for 12 columns, and includes both <th> and <td>:


/* table column text alignment */
.col-r-1 td:nth-child(1),
.col-r-1 th:nth-child(1),
.col-r-2 td:nth-child(2),
.col-r-2 th:nth-child(2),
.col-r-3 td:nth-child(3),
.col-r-3 th:nth-child(3),
.col-r-4 td:nth-child(4),
.col-r-4 th:nth-child(4),
.col-r-5 td:nth-child(5),
.col-r-5 th:nth-child(5),
.col-r-6 td:nth-child(6),
.col-r-6 th:nth-child(6),
.col-r-7 td:nth-child(7),
.col-r-7 th:nth-child(7),
.col-r-8 td:nth-child(8),
.col-r-8 th:nth-child(8),
.col-r-9 td:nth-child(9),
.col-r-9 th:nth-child(9),
.col-r-10 td:nth-child(10),
.col-r-10 th:nth-child(10),
.col-r-11 td:nth-child(11),
.col-r-11 th:nth-child(11),
.col-r-12 td:nth-child(12),
.col-r-12 th:nth-child(12) {
  text-align: right;
}

.col-l-1 td:nth-child(1),
.col-l-1 th:nth-child(1),
.col-l-2 td:nth-child(2),
.col-l-2 th:nth-child(2),
.col-l-3 td:nth-child(3),
.col-l-3 th:nth-child(3),
.col-l-4 td:nth-child(4),
.col-l-4 th:nth-child(4),
.col-l-5 td:nth-child(5),
.col-l-5 th:nth-child(5),
.col-l-6 td:nth-child(6),
.col-l-6 th:nth-child(6),
.col-l-7 td:nth-child(7),
.col-l-7 th:nth-child(7),
.col-l-8 td:nth-child(8),
.col-l-8 th:nth-child(8),
.col-l-9 td:nth-child(9),
.col-l-9 th:nth-child(9),
.col-l-10 td:nth-child(10),
.col-l-10 th:nth-child(10),
.col-l-11 td:nth-child(11),
.col-l-11 th:nth-child(11),
.col-l-12 td:nth-child(12),
.col-l-12 th:nth-child(12) {
  text-align: left;
}

To use (this would right-align the 2nd and 3rd columns):

<table className="table text-left col-r-2 col-r-3">
    <thead>
        <tr>
            <th>Widget</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Comments</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Sprocket</th>
            <th>100</th>
            <th>$4.57</th>
            <th>Works well</th>
        </tr>
        <tr>
            <th>Rocket fuel</th>
            <th>7</th>
            <th>$114.57</th>
            <th>Spicy</th>
        </tr>
    </tbody>
</table>

Using bootstrap, you can globally align the table with text-right or text-left, and then tweak which columns don't match the whole table; I'd imagine other CSS frameworks would have something similar.

user_9063850
Related