反转html表格中每个单元格的背景颜色

Question

I have an html table of unicode numbers in varying colors and I'd like to do 2 things.

1. Have the background for each cell be the reverse color of the unicode symbol color.
2. The circled numbers are not all the same size. How can I insure the same size and alignment of all symbols in the table.

Here is a sample row.

<table>
<tr>
<td align="center;"><mark class="unicode" style="color: #ffbf00; font-size: 15em; font-weight: bold;">①</mark></td>
<td align="center;"><mark class="unicode" style="color: #b5c306; font-size: 15em; font-weight: bold;">②</mark></td>
<td align="center;"><mark class="unicode" style="color: #b87333; font-size: 15em; font-weight: bold;">③</mark></td>
<td align="center;"><mark class="unicode" style="color: #1560bd; font-size: 15em; font-weight: bold;">④</mark></td>
<td align="center;"><mark class="unicode" style="color: #614051; font-size: 15em; font-weight: bold;">⑤</mark></td>
</tr>
</table>

Here is a jsfiddle link.

Answer 1

You can apply a different coloration to the background and the same color for the unicode to have the needed result when using mix-blend-mode . To have the same size, consider monospace as font-family .

You can also adjsut padding / line-height to control the spaces:

 table, th, td { border: 1px solid black; } td { padding:0 1.5em 1.5em; } mark { font-size: 20em; font-weight: bold; mix-blend-mode: exclusion; color: #fff; background: transparent; font-family: monospace; line-height:0.6; }

 <table style="width: 10%;" border="0"> <tbody> <tr> <td style="background-color: #ffbf00"><mark class="unicode">①</mark></td> <td style="background-color: #b5c306"><mark class="unicode">②</mark></td> <td style="background-color: #b87333;"><mark class="unicode">③</mark></td> <td style="background-color: #1560bd;"><mark class="unicode">④</mark></td> <td style="background-color: #614051"><mark class="unicode">⑤</mark></td> </tr> </tbody> </table>