22 Votes

HTML/CSS: Align entire Table Column right or centered

Question by Compi | Last update on 2021-07-26 | Created on 2017-02-24

I have a quite large HTML table at which I want to align the text of a complete column either right aligned or centered.

Up to now, I only know the alignment possibility to set up inline CSS for each single TD element of the table, for example like that:

...
<tr>
  <td>left-aligned content</td>
  <td style="text-align:center">centered content</td>
  <td style="text-align:right">right-aligned content</td>
</tr>
...

The problem is obvious: I have to repeat the text-align CSS for each table row (TR) - and as I have said, in my case that are very much rows.

So, isn't there any other more convenient possibility for doing that? For example by defining some CSS or HTML only once at a central position or only once per column? Or at least a simpler solution than that?

ReplyPositiveNegativeDateVotes
4Best Answer6 Votes

You can for example go with the pseudo CSS selector nth-child.

Here is an example for a possible CSS rule:

table.colright td:nth-child(2) {
  text-align: right;
}

Then you only have to assign the defined CSS class to your table:

<table class="colright">
  <tr><td>A</td><td>B</td><td>C</td></tr>
  <tr><td>A</td><td>B</td><td>C</td></tr>
  <tr><td>A</td><td>B</td><td>C</td></tr>
</table>

With td:nth-child(2) you are selecting each second TD element. In each row starting with TR, the counting is reset so that it is sufficient to assign the class once to your entire table for always aligning the full second column.
Last update on 2021-07-26 | Created on 2017-02-25

ReplyPositive Negative
11 Vote

For also supporting older browsers that cannot handle nth-child, you can use the following CSS:

table.colright td + td + td {
  text-align: right;
}

Using this CSS selector, you select each column respectively each TD-element before which two other TD-elements are.

So, with this CSS, you would right align each third column of each table having assigned the class "colright".
Last update on 2021-07-26 | Created on 2017-02-25

ReplyPositive Negative
00 Votes

If you only want to make it shorter than <td style="text-align:center"> you can also define the CSS class ralign {text-align:center} and then write <td class="ralign"> for each cell you want to align right.
2017-02-26 at 18:20

ReplyPositive Negative
11 Vote

Hi, just solved it. use td:nth-child(1) {

text-align: right;

}

"td:nth-child(1)" selects the first data entry of each row.

that's it and all your first column data will be set to your choice.
2022-11-28 at 19:05

ReplyPositive Negative
Reply

Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own article on askingbox.com. That’s how it’s done.