two tables overlapping each other html - html

Question

I'm trying to add vertical lines to my table that aligns with the headers and I'm using 'border-collapse: separate' as well as colspan that varies from 1 to any number. Here is an image to imagine it
Keeping in mind Cell1 has colspan of 3 and cell 2 has colspan of 2
but I would like to keep the separate border collapse for the view. My approach was to put two tables above each other one for the data with opacity:70% for example to show the table below it and the table below it should have the vertical lines with each header. However, I'm unable in anyway to put two tables in the same position.
<div id="app">
<h2>Todos:</h2>
<ol>
<table
BORDER
>
<thead>
<tr>
<th >
H1
</th>
<th
>
H2
</th>
<th
>
H3
</th>
<th
>
H4
</th>
<th
>
H5
</th>
</tr>
</thead>
<tbody>
<td colspan="3">
Cell1
</td>
<td colspan="2">
Cell2
</td>
</tbody>
</table>
</ol>
</div>
Here is a fiddle of the table
http://jsfiddle.net/vrL9s7ft/6/

Answer 1

I have attached a working example here http://jsfiddle.net/whjnt5o2/1/
th, td {
border: 1px solid black;
box-sizing: border-box;
height: 100px;
width: 100px;
text-align: center;
}
table{
border-spacing: 0;
}
table.background-table{
position: absolute;
}
table.background-table th, table.background-table td {
border: 1px dashed gray;
top: 0;
}
<div>
<table class="background-table">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tbody>
</table>
<table>
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
<th>H5</th>
</tr>
</thead>
<tbody>
<td colspan="3">
Cell1
</td>
<td colspan="2">
Cell2
</td>
</tbody>
</table>
</div>