CSS semi-transparent colors

Advantage of to use CSS sem transparent colors for a more elegant design and readibility

by caos30

HTML

<table class="data solid">
<tr class="blue"><td>Num</td><td>Title</td><td>Date</td><td>Percentage</td></tr>
<tr class="green"><td>1</td><td>Juanito</td><td>20/12/2017</td><td>100%</td></tr>
<tr class="orange"><td>2</td><td>Jorgito</td><td>22/12/2017</td><td>20%</td></tr>
<tr class="red"><td>3</td><td>Jaimito</td><td>25/12/2017</td><td>0%</td></tr>
</table>

<table class="data transparency">
<tr class="blue"><td>Num</td><td>Title</td><td>Date</td><td>Percentage</td></tr>
<tr class="green"><td>1</td><td>Juanito</td><td>20/12/2017</td><td>100%</td></tr>
<tr class="orange"><td>2</td><td>Jorgito</td><td>22/12/2017</td><td>20%</td></tr>
<tr class="red"><td>3</td><td>Jaimito</td><td>25/12/2017</td><td>0%</td></tr>
</table>

CSS

table.data {border-collapse:collapse;width:auto;font-family: sans-serif;font-size:1.1rem;margin:3rem;}
table.data td { border-bottom:1px #555 solid;padding:0.2rem 0.6rem;text-align:center;
                color:#111; font-weight:200;}
table.data tr:first-child td {border-top:1px #555 solid;font-weight:400;}

table.data.solid tr.blue {background-color:#0000ff;}
table.data.solid tr.green {background-color:#00ff00;}
table.data.solid tr.orange {background-color:#ff8800;}
table.data.solid tr.red {background-color:#ff0000;}

table.data.transparency tr.blue {background-color:rgba(0,0,255,0.2);}
table.data.transparency tr.green {background-color:rgba(0,255,0,0.2);}
table.data.transparency tr.orange {background-color:rgba(255,128,0,0.2);}
table.data.transparency tr.red {background-color:rgba(255,0,0,0.2);}