Using Text-align Center In Colgroup - Html - Stack Overflow

Sorry, we no longer support your browser Please upgrade to Microsoft Edge, Google Chrome, or Firefox. Learn more about our browser support.

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs Using text-align center in colgroup Ask Question Asked 15 years, 4 months ago Modified 1 year, 9 months ago Viewed 44k times 75

I have a table in my page. I use colgroups to format all cells in this column the same way. It works well for background color and all. but I cannot seem to figure out why text-align center does not work. It does not align the text centered.

Example:

<table id="myTable" cellspacing="5"> <colgroup id="names"></colgroup> <colgroup id="col20" class="datacol"></colgroup> <colgroup id="col19" class="datacol"></colgroup> <colgroup id="col18" class="datacol"></colgroup> <thead> <th>&nbsp;</th> <th>20</th> <th>19</th> <th>18</th> </thead> <tbody> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </tbody> </table>

CSS:

#names { width: 200px; } #myTable .datacol { text-align: center; background-color: red; }

• html
• css
• html-table
• css-tables

Share Improve this question Follow edited Mar 12, 2023 at 18:42 Peter Mortensen 31.6k2222 gold badges109109 silver badges133133 bronze badges asked Aug 6, 2009 at 10:31 SanderSander 13.4k1515 gold badges7373 silver badges9898 bronze badges Add a comment |

4 Answers 4

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 123

Only a limited set of CSS properties applies to columns, and text-align isn't one of them.

See "The mystery of why only four properties apply to table columns" for a description of why this is the case.

In your simple example, the easiest way to fix it would be to add these rules:

#myTable tbody td { text-align: center } #myTable tbody td:first-child { text-align: left }

That would center all table cells, except the first column. This doesn't work in IE6, but in IE6 the text-align does actually (wrongly) work on the column. I don't know if IE6 supports all properties, or just a larger subset.

Oh, and your HTML is invalid. <thead> misses a <tr>.

Share Improve this answer Follow edited Mar 12, 2023 at 18:29 Peter Mortensen 31.6k2222 gold badges109109 silver badges133133 bronze badges answered Aug 6, 2009 at 10:43 mercatormercator 28.6k88 gold badges6565 silver badges7474 bronze badges 6

• so you are saying it just is not possible and he only way to achieve this would be to do it on the TD element itself then – Sander Commented Aug 6, 2009 at 12:02
• Yep. I've added a fix for your example, though that's not going to work if the table gets any more complicated. DisgruntledGoat provides a few more solutions. – mercator Commented Aug 6, 2009 at 13:07
• Both of those suggestions regarding the missing tr inside thead are invalid, too. th doesn't belong in tbody and td doesn't belong in thead. Just add a tr to contain the th's inside thead. – graywh Commented Nov 12, 2010 at 15:18
• @graywh, I agree it's best to keep the th in the thead, so I've removed my suggestions. It's perfectly valid, and may be appropriate, to have a th in the tbody or a td in the thead, though. E.g. a header column can't go in the thead, and descriptions of headers could go in tds in the thead. But neither is probably the case here. – mercator Commented Nov 13, 2010 at 2:15
• @wtjones, that's because IE quirks mode (in any version of IE) is essentially the same as IE5.5 (so don't use it!). If you have no choice, you can make it work in quirks mode the same way as in IE6 (i.e. by setting text-align on the col/colgroup anyway). – mercator Commented Dec 21, 2011 at 13:13

| Show 1 more comment 25

See a similar question: Why is styling table columns not allowed?

You are only allowed to set border, background, width and visibility properties, due to the fact that cells aren't direct descendents of columns, only of rows.

There are a few solutions. The simplest is to add a class to each cell in the column. Unfortunately that means more HTML, but it shouldn't bee a problem if you're generating tables from a database, etc.

Another solution for modern browsers (i.e., not Internet Explorer 6) is to use some pseudo classes. tr > td:first-child will select the first cell in a row. Opera, Safari, Chrome and Firefox 3.5 also support the :nth-child(n) selector so you can target specific columns.

You could also use td+td to select from the second column onwards (it actually means "select all td elements that have one td element to its left). td+td+td selects from the third column - you can continue in this fashion, overriding properties. Honestly though, it's not great code.

Share Improve this answer Follow edited Mar 12, 2023 at 18:32 Peter Mortensen 31.6k2222 gold badges109109 silver badges133133 bronze badges answered Aug 6, 2009 at 11:11 DisgruntledGoatDisgruntledGoat 72.4k7070 gold badges212212 silver badges291291 bronze badges Add a comment | 6

With the following CSS, you can just append one or more classes to the the table element in order to align its columns accordingly.

CSS

.col1-right td:nth-child(1) {text-align: right} .col2-right td:nth-child(2) {text-align: right} .col3-right td:nth-child(3) {text-align: right}

HTML

<table class="col2-right col3-right"> <tr> <td>Column 1 will be left</td> <td>Column 2 will be right</td> <td>Column 2 will be right</td> </tr> </table>

Example: http://jsfiddle.net/HHZsw/

Share Improve this answer Follow edited Mar 12, 2023 at 18:34 Peter Mortensen 31.6k2222 gold badges109109 silver badges133133 bronze badges answered Aug 14, 2013 at 12:56 FredFred 12.7k77 gold badges6464 silver badges8888 bronze badges 1

• true, though small remark: those selectors are CSS3 selectors, and usable in IE9 and higher. If you need support for lower versions of IE, you cannot use this method. – Sander Commented Aug 14, 2013 at 13:02

Add a comment | 0

In addition to the limitations mentioned in other answers, as of February 2018, visibility:collapse still does not work on colgroups in Chrome and Chromium based browsers, due to a bug. See CSS col visibility:collapse does not work on Chrome.

So I believe the currently usable properties are just border, background, and width (unless you employ some sort of polyfill for Chrome and other Chromium-based browsers). The bug can be tracked at Issue 174167: visibility:collapse does not work correctly for table columns or rows.

Share Improve this answer Follow edited Mar 12, 2023 at 18:40 Peter Mortensen 31.6k2222 gold badges109109 silver badges133133 bronze badges answered Feb 22, 2018 at 23:13 Jacob C.Jacob C. 36411 silver badge1616 bronze badges Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• html
• css
• html-table
• css-tables

or ask your own question.

• The Overflow Blog
• Why do developers love clean code but hate writing documentation?
• This developer tool is 40 years old: can it be improved?
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Linked

13 Why text-align doesn't work in colgroup? 0 Is text-align not possible for <col> tag? <col> represents the group of column in <colgroup> 74 Better way to right align text in an HTML table 20 Why is styling table columns not allowed? 9 CSS col visibility:collapse does not work on Chrome 4 How to horizontally align columns in a table 3 Aligning text in table column group in HTML5 4 Specifying the width and text alignment of a column 1 html table with column in monospace font 1 w3c's colgroup example invalid? See more linked questions

Related

36 Center text in table cell 63 Center-align a HTML table 8 How to center XHTML (and/or HTML4) TABLE columns by colgroup? 62 Center align with table-cell 1 Center the text in a row of an HTML table 0 Centering a column in a table 1 Center Text in Table column 3 Aligning text in table column group in HTML5 1 Center text in an HTML table across group of cells 1 CSS Styling - Can't centre text in a table

Hot Network Questions

• Determine dropout spacing for vintage bike frame online
• How does Christine's origin differ in the movie rather than the book?
• Series where father and daughter are abducted from Earth and forced to fight for an Imperium
• why would a search warrant say that the items to search for were the following: hair, fibers, clothing, rope wire, and binding material?
• How to do a batch of changes in `about:config` in the Firefox?
• What is the overlap between philosophy and physics?
• Meaning of the diameter of a space-distorting object
• An extension of Lehmer's conjecture on Ramanujan's tau function
• How feasible would it be to "kill" the Sun by using blood?
• What explains the definition of true and false in untyped lambda calculus?
• Why don't the Bene Gesserit retaliate against Vladimir Harkonnen for trying to kill Jessica and Paul?
• C++ code reading from a text file, storing value in int, and outputting properly rounded float
• Why were my lead-acid batteries destroyed after operating them in parallel?
• Can Bob send a stone into Alice's future?
• Should parameter names describe their object type?
• Optimize rsync when large files move around on the source
• Is it important that my dishwasher's cabinet seals make contact with the opening?
• Does silence have a role to play in the philosophical dialectic?
• Errors while starting vite + react
• How did 1977's Car Polo arcade game by Exidy perform hitbox detection, and rigid body collision and movement on the ball?
• Exploiting MSE for fast search
• Why do many PhD application sites for US universities prevent recommenders from updating recommendation letters, even before the application deadline?
• Writing rhythm/slash notation on a single line staff?
• MotW: Which bonuses stack?

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html