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

Question

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>

Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

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 class="ovl">
<td colspan="3" >Overlap this</td>
</tr>
<tr>
<td>ValueA</td>
<td>ValueB</td>
<td>ValueC</td>
</tr>
</tbody>
</table>