HTML/CSS: Align Entire Table Column Right Or Centered - AskingBox

askingbox.com 👤 Sign Up + New 🔎 Search All Topics > Homepage and Web Design > HTML 22 VotesHTML/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 Anja Proggy4Best 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 Progger9911 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 Compi00 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 Guest11 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 NegativeReply

Related Topics

Lord's Prayer in 20 other Languages

Info | 0 Comments

CSS: Include CSS Stylesheets in HTML

Tutorial | 0 Comments

MySQL: Add new Column to a Table

Tutorial | 0 Comments

MySQL: Delete Data from Table - Difference between TRUNCATE, DELETE and DROP

Tutorial | 0 Comments

Website Performance: Deliver JavaScript and CSS files compressed to reduce loading times

Tutorial | 0 Comments

CSS: "align:center" and "align:right" not working

Question | 1 Answer

Total Lunar Eclipses in Germany - Dates

Info | 0 Comments

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.

Participate

• Login
• Register
• Ask Question

Topics

• All Topics
• Unanswered
• Advanced Search

Info

• User Top 100
• Donate
• Advertise here

About

• About us
• Contact
• Imprint

Deutsch | English | Español | Français

Legal Notice | Terms of Use | Privacy | Imprint

© Stefan Trost Media 2011-2025 | Webdesign by STT Media