If you want to left-, center- or right-align columns in a <table>, do not add a class to each cell. Instead, add a data- attribute for each column on the <table>-tag:
<table data-c2="end" data-c4="center">
...
</table>
In this case, we want to “end”-align the text in the second column (that is “right” when using left-to-right and “left” when using right-to-left) — and center-align the text in column 4.
The CSS for this is:
:where(table) {
&[data-c1~="center"] tr > *:nth-of-type(1),
&[data-c2~="center"] tr > *:nth-of-type(2),
&[data-c3~="center"] tr > *:nth-of-type(3),
&[data-c4~="center"] tr > *:nth-of-type(4),
&[data-c5~="center"] tr > *:nth-of-type(5),
&[data-c6~="center"] tr > *:nth-of-type(6),
&[data-c7~="center"] tr > *:nth-of-type(7),
&[data-c8~="center"] tr > *:nth-of-type(8) { text-align: center; }
&[data-c1~="end"] tr > *:nth-of-type(1),
&[data-c2~="end"] tr > *:nth-of-type(2),
&[data-c3~="end"] tr > *:nth-of-type(3),
&[data-c4~="end"] tr > *:nth-of-type(4),
&[data-c5~="end"] tr > *:nth-of-type(5),
&[data-c6~="end"] tr > *:nth-of-type(6),
&[data-c7~="end"] tr > *:nth-of-type(7),
&[data-c8~="end"] tr > *:nth-of-type(8) {
text-align: end;
}
}
Add more columns if needed!
This was supposed to be my first quckie-post, but then I saw the 256-char limit ;-)
SOCIAL SHARE CARD GENERATOR