Log in / Register

Forum › How do I...?

Change text-align or text-align-last in table-column

Hans
How do I change the "text-align" and "text-align-last" properties for all cell's in a certain column?

This is what I have now, XML:
            <table type="num">
                <col width="10%" />
                <col />
                <col width="10%" align="right" />
                <col />
                <header>
                    <row><cell>#</cell><cell>Commodo pellentesque</cell><cell>Eur (<euro />)</cell><cell>Leo lectus sit amet lacus</cell></row>
                </header>
                <body>
                    <row><cell>Ut id elit ipsum</cell><cell>1.250</cell><cell>Donec nec est lorem</cell></row>
                </body>
            </table>

With the CSS (only definition for "col". The "table", "header", "body", "row" and "cell" are all using "display: table-...;" the "type="num"" will add a cell at each "row::before" with a counter):
col {
    display: table-column;
}
col[width] {
    width: attr(width, pt, attr(width, percent));
}
col[align="right"] {
    text-align-last: right;
}


But it doesn't seem to work. Is there any work-around without modifying the XML?
mikeday
The text-align property isn't being inherited from column elements down to cells. But you can apply it directly to the cells, for example like this:
cell:nth-of-type(3) { ... }
Hans
Thanks!

This works:
col[align="right"]:nth-of-type(1) ~ body > row > cell:nth-of-type(1) {
	text-align: right;
}
col[align="right"]:nth-of-type(2) ~ body > row > cell:nth-of-type(2) {
	text-align: right;
}
col[align="right"]:nth-of-type(3) ~ body > row > cell:nth-of-type(3) {
	text-align: right;
}
...