homepage Welcome to WebmasterWorld Guest from 54.237.235.12
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Styling a Table Column
Certificates



 
Msg#: 4628742 posted 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

snipped

Antony

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

 

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4628742 posted 9:25 pm on Dec 9, 2013 (gmt 0)

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

Using
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.
lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4628742 posted 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]

Certificates



 
Msg#: 4628742 posted 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

Thanks

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