Welcome to WebmasterWorld Guest from 50.19.34.234

Forum Moderators: not2easy

Message Too Old, No Replies

Styling a Table Column

     

Certificates

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

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

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



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.

lucy24

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

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



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

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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month