Could someone please assist me in achieving this specific layout shown in the attached screenshot? I am having difficulty adding the ROW TITLE and making the "Merged header title will go here and centered vertically" to expand as illustrated in the screenshot. I've attempted using rowSpan / colSpan but it seems to disrupt the table structure.
If anyone could provide guidance on what I might be doing incorrectly or steer me in the right direction, I would greatly appreciate it. Here is a link to my current work in a sandbox for reference: https://codesandbox.io/s/pedantic-river-6ypelb?file=/src/App.js
https://i.sstatic.net/07uKs.png
Please refer to the following screenshot of my current implementation:
https://i.sstatic.net/DWpmC.png
.wrapper {
font-family: sans-serif;
text-align: center;
max-width: 100%;
overflow-x: scroll;
}
.table-title {
border: 1px solid black;
padding-left: 20px;
background-color: #eceeef;
}
table {
width: 100%;
}
table thead tr:first-child th:not(:first-child) {
padding: 10px;
}
table thead tr th {
padding: 7px;
}
table tbody tr:nth-child(even) {
background-color: #cfd7e5;
}
table tbody tr:nth-child(even) td:first-child {
background-color: #fff;
}
table tbody tr td {
padding: 10px;
}
table th,
table td {
border: 1px solid black;
}<div>
<div class="table-title">
<h2>Table title here</h2>
</div>
<table style="table-layout: auto;">
<colgroup></colgroup>
<thead>
<tr>
<th rowspan="4"></th>
<th colspan="3">Merged header title will go here and centred 1</th>
<th colspan="3">Merged header title will go here and centred 2</th>
</tr>
<tr>
<th>COLUMN TITLE 1</th>
<th>COLUMN TITLE 2</th>
<th>COLUMN TITLE 3</th>
<th>COLUMN TITLE 4</th>
<th>COLUMN TITLE 5</th>
<th>COLUMN TITLE 6</th>
</tr>
</thead>
<tbody>
<tr>
<td>Merged header title will go here and centred vertically</td>
<td>1st January 2020</td>
<td>1st January 2020</td>
<td>1st January 2020</td>
<td>1st January 2020</td>
<td>1st January 2020</td>
<td>1st January 2020</td>
</tr>
<tr>
<td>Merged header title will go here and centred vertically</td>
<td>8th January 2020</td>
<td>8th January 2020</td>
<td>8th January 2020</td>
<td>8th January 2020</td>
<td>8th January 2020</td>
<td>8th January 2020</td>
</tr>
<tr>
<td>Merged header title will go here and centred vertically</td>
<td>12th January 2020</td>
<td>12th January 2020</td>
<td>12th January 2020</td>
<td>12th January 2020</td>
<td>12th January 2020</td>
<td>12th January 2020</td>
</tr>
<tr>
<td>Merged header title will go here and centred vertically</td>
<td>21st January 2020</td>
<td>21st January 2020</td>
<td>21st January 2020</td>
<td>21st January 2020</td>
<td>21st January 2020</td>
<td>21st January 2020</td>
</tr>
</tbody>
</table>
</div>