Is there a way to shift the red area (x1, x2) to the right using only CSS in a table where the <tfoot> tag cannot be edited?
https://jsfiddle.net/qL03728p/
table {
width: 100%;
border-collapse: separate;
}
table td {
border-top: 1px solid red;
}
thead {
background: green;
}
tbody {
background: yellow;
}
tfoot {
background: red;
}<table cellspacing="0">
<thead>
<tr>
<th>thead 1</th>
<th>thead 2</th>
<th>thead 3</th>
<th>thead 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>tbody 1</td>
<td>tbody 2</td>
<th>tbody 3</th>
<th>tbody 4</th>
</tr>
</tbody>
<tfoot>
<tr>
<td>x1</td>
<td>x2</td>
</tr>
</tfoot>
</table>