How can I overlap a table row over another?-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

table tbody {
  position: relative;
}

table tbody tr:nth-child(2) {
  background: azure;
  position: absolute;
  display: block;
  width: 100%;
  margin-top: -25px;
}

<table>
  <tbody>
    <tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value3</td>
    </tr>
    <tr>
      <td colspan="3">Overlap this</td>
    </tr>
    <tr>
      <td>ValueA</td>
      <td>ValueB</td>
      <td>ValueC</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

tbody {
  width: 100%;
}

tr {
  width: inherit;
}

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

CodePudding user response：

In your style list you have a small mistake. Instead , you need semicolon ; after: ...display: block, <-- small bug :-) ... <tr style="background: azure; position: absolute; display: block; width: 100%; margin-top: -25px">

.ovl {  
  background: azure; 
  position: absolute; 
  display: block;
  width: 100%; margin-top: -25px  
}

tbody {
  position: relative;  
}

<table>
  <tbody>
    <tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value33</td>
    </tr>
    <tr >
      <td colspan="3" >Overlap this</td>
    </tr>
    <tr>
      <td>ValueA</td>
      <td>ValueB</td>
      <td>ValueC</td>
    </tr>
  </tbody>
</table>