Is possible span only the text in a HTML table?
I need that the text span in 3 columns but I must keep the background color of the cells different: example first cell red, secon cell green third cell red
<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td colspan="3" bgcolor="red">abcdefgh</td>
<td bgcolor="green"></td>
<td bgcolor="red"></td>
</tr>
</table>
>Solution :
You can create a linear gradient for the background of the first/spanned cell that uses abrupt changes between the different colors (and delete the superfluous empty cells):
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid grey;
}
.x {
background: linear-gradient(270deg, #FF0101 0% 33.33%, #5BA25F 33.34% 66.66%, #FF0101 66.67% 100%);
}<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td colspan="3" class="x">abcdefghoiuasdfijawerhkgkjbyxc</td>
</tr>
</table>