Welcome to WebmasterWorld Guest from 54.166.214.107

Forum Moderators: not2easy

Message Too Old, No Replies

Styling a Table Column

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

New User

joined:Oct 16, 2011
posts: 32
votes: 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]

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

Senior Member

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

joined:Mar 15, 2002
posts:6807
votes: 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
colgroup
s 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)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13056
votes: 299


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)

New User

joined:Oct 16, 2011
posts: 32
votes: 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
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members