CSS class applied to element not fully applied

Question

With this CSS:

table.swtable, .swtable tr, td {border-collapse:collapse; border: 1px solid black; width: auto !important}
.swtable td {padding: 10px; text-align: center}
.swcolheading {background-color: #D9FFD9}
.swrowheading {background-color: #D9FFD9; text-align: right}

and this HTML:

<table class="swtable">
    <colgroup><col class="swrowheading"></colgroup>
    <tr class="swcolheading"><td></td><td>col 1</td><td>col 2</td></tr>
    <tr><td>row 1</td><td>c1 r1</td><td>c2 r1</td></tr>
    <tr><td>row 2</td><td>c1 r2</td><td>c2 r2</td></tr>
</table>

The table picks up the correct background colour for the first column, but the text in that column is centre aligned. How do I manage to have the text in the first column right aligned. Obviously the first line of CSS is setting the centre alignment for all cells, but how do I overwrite that for the first column?

Note, the width option is specified for the table, because someone else's CSS had set a table width of 100% which I did not want.

this might help http://stackoverflow.com/questions/1238115/using-text-align-center-in-colgroup/1238151#1238151 or this http://stackoverflow.com/questions/4458131/is-there-a-way-to-set-the-text-alignment-of-entire-column-in-a-table — Martin Turjak, May 11 '13 at 14:21
here is a jsfiddle with your table using the solution from one of answers that I link to in the above comment: http://jsfiddle.net/7Z9Dt/ — Martin Turjak, May 11 '13 at 14:37

score 0 · Accepted Answer · edited May 23 '17 at 10:32

Thanks to Martin Turjak for pointing me to this thread using text-align center in colgroup. It shows that <col> only supports four properties (and not text-align), and gives a link to explain why. So the answer to the question is: It cannot be done with <col>

That post also shows how text-align: right can be applied to the first column in a table, and as that is what I wanted to do, it gave me the answer I needed.

CSS class applied to element not fully applied

1 Answers1