Styling a Table Column

[Certificates]

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]

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]

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]

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