две таблицы перекрывающие друг друга 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/
Ответы - две таблицы перекрывающие друг друга html / two tables overlapping each other html

19.11.2020 03:49:05
Я приложил здесь рабочий пример 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>