[FIXED] How can I overlap a table row over another?

Issue

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>

Answered By - Patrick Cyubahiro

Answer Checked By - Timothy Miller (PHPFixing Admin)