Move table <tfoot> to the right with CSS

Question

I have this table that I can't edit its <tfoot> HTML tag, it's rendered with a PHP function that can't change. So I can't change the <tr> inside the <tfoot>.

How can I move the red area (x1, x2) to the right with just CSS?

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>

Answer 1

As another answer mentions, this seems quite difficult to achieve without the use of JavaScript, particularly as the td elements are missing from the tfoot.

However, there is an alternative solution using a transformation that uses translateX on the tfoot:

tfoot {
    background: red;
    transform: translateX(50%);
}

This moves the whole element by 50% to the right.

As pointed out by @isherwood in the comments, this has the unhelpful side-effect of creating a horizontal overflow on the table. This can simple be corrected by setting overflow: hidden on the table CSS:

table {
    ...
    overflow: hidden;
}

Here it is in a working snippet:

table {
    width: 100%;
    border-collapse: separate;
    overflow: hidden;
}
table td {
    border-top: 1px solid red;
}
thead {background: green;}
tbody {background: yellow;}
tfoot {
    background: red;
    transform: translateX(50%);
}

<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>