How can I lap a table row over another?

April 11, 2022

This is just taking the content width and what I need is the entire "Overlap this" row to move on top of the previous row and using the width of its predecessor. Any hint on how to solve this?

<table>
  <tbody>
    <tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value3</td>
    </tr>
    <tr style="background: azure; position: absolute; display: block, width: 100%; margin-top: -25px">
      <td colspan="3">Overlap this</td>
    </tr>
    <tr>
      <td>ValueA</td>
      <td>ValueB</td>
      <td>ValueC</td>
    </tr>
  </tbody>
</table>

>Solution :

Style the table data <td> tag, instead of the table row <tr>. Check the code below.

<table>
  <tbody>
    <tr style="background: azure; position: absolute; display: block;">
      <td colspan="3" style="width: 150px;">Overlap this</td>
    </tr>
    <tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value3</td>
    </tr>
    <tr>
      <td>ValueA</td>
      <td>ValueB</td>
      <td>ValueC</td>
    </tr>
  </tbody>
</table>