две таблицы перекрывающие друг друга html

Я пытаюсь добавить вертикальные линии в свою таблицу, которая выравнивается с заголовками, и я использую "border-collapse: separate", а также colspan, который варьируется от 1 до любого числа. Вот образ, чтобы представить себе это

Имея в виду, что ячейка 1 имеет colspan 3, а ячейка 2 имеет colspan 2

но я хотел бы сохранить отдельный крах границы для вида. Мой подход состоял в том, чтобы поместить две таблицы друг над другом для данных с непрозрачностью:например, 70%, чтобы показать таблицу под ней, а таблица под ней должна иметь вертикальные линии с каждым заголовком. Однако я все равно не могу поставить два стола в одно и то же положение.

<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>

Вот скрипка стола

http://jsfiddle.net/vrL9s7ft/6/