homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Styling a Table Column

 2:24 pm on Dec 8, 2013 (gmt 0)

I wish to style a table that has 11 columns and about 800 rows.

What I want is for the numbers in the first column to be in the centre of the cell (apart from the header in the top row)

Is there a way ? I understand text-align center will not work on cols



[edited by: DrDoc at 9:22 pm (utc) on Dec 9, 2013]
[edit reason] No URLs please [/edit]



 9:25 pm on Dec 9, 2013 (gmt 0)

Anthony, that depends a little on what exactly you mean.

text-align: center will work fine. You can either apply that via a class or a CSS3 selector which targets the first child.

If you are working with
colgroups you can even use the style attribute on the column in question.

If using
text-align: center is not working as expected, then there's something else going on overriding it.

 10:41 pm on Dec 9, 2013 (gmt 0)

If using text-align: center is not working as expected, then there's something else going on overriding it.

Yes: the html/css spec [w3.org] itself:
cells are descendants of rows, never of columns. Nevertheless, some aspects of cells can be influenced by setting properties on columns.

The exceptions are backgrounds, borders, width and visibility. It looks as if the CSS3 folks are still slugging out the details, because the expected www.w3.org/TR/css3-tables/ [w3.org] does not exist, although dev.w3.org/csswg/css3-tables [dev.w3.org] links to it. (DrDoc, can you find anything? I dead-ended here [w3.org] which seems to suggest they've thrown up their hands and given up on the whole thing.)

BUT there's an alternative.

table.thisclass td:first-child {blahblah}

will apply only to the first cell in each row. Since a cell is always the child of a row, you don't need to go into detail. Careful! If any of those first-column cells span multiple rows, then the second cell in subsequent rows may be counted as the first cell. You can override this with a further

table.thisclass td.special:first-child {otherblahblah}

According to caniuse dot com, the :first-child selector is supported in MSIE7 (and, of course, in all browsers), so unless your target group is very specialized you should be OK.

[edited by: bill at 8:08 am (utc) on Dec 10, 2013]
[edit reason] fix [/edit]


 4:55 am on Dec 10, 2013 (gmt 0)

Thanks for the help.

I found that this code worked well when "householder is the name of the table

.householder tr td:first-child { text-align:center; }

Now to see how the special class Lucy suggested works as I have just two rows where I need to colspan cells 1-3 and as said it overrides the styling I wish to place there


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved