Span only text in a HTML table

October 10, 2023

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>