How do I convert a flickity table using multiple tables into a single table - html-table

Question

So I am having issues converting my responsive carousel table from individual tables to a single table, any help would be much appreciated.
<table class="table-head">
<thead>
<th>Head</th>
</thead>
<tbody>
<tr>
<td>Attr1</td>
</tr>
<tr>
<td>Attr2</td>
</tr>
<tr>
<td>Attr3</td>
</tr>
<tr>
<td>Attr4</td>
</tr>
</tbody>
</table>
<div class="table-scroll carousel">
<table class="carousel-cell">
<th>Title1</th>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
<tr>
<td>13</td>
</tr>
<tr>
<td>14</td>
</tr>
</table>
<table class="carousel-cell">
<th>Title2</th>
<tr>
<td>21</td>
</tr>
<tr>
<td>22</td>
</tr>
<tr>
<td>23</td>
</tr>
<tr>
<td>24</td>
</tr>
</table>
<table class="carousel-cell">
<th>Title3</th>
<tr>
<td>31</td>
</tr>
<tr>
<td>32</td>
</tr>
<tr>
<td>33</td>
</tr>
<tr>
<td>34</td>
</tr>
</table>
<table class="carousel-cell">
<th>Title4</th>
<tr>
<td>41</td>
</tr>
<tr>
<td>42</td>
</tr>
<tr>
<td>43</td>
</tr>
<tr>
<td>44</td>
</tr>
</table>
</div>
To then turn it into something like this
<div class="table-scroll carousel">
<table class="table-head">
<tr class="carousel-cell">
<th>Date</th>
<td>2021</td>
<td>01 June</td>
<td>05 June</td>
<td>05 June</td>
<td>08 June</td>
<td>10 June</td>
<td>16 June</td>
<td>24 June</td>
<td>25 June</td>
<td>30 June</td>
<td>30 June</td>
<td>30 June</td>
<td>30 June</td>
<td> </td>
</tr>
<tr class="carousel-cell">
<th>Details</th>
<td> </td>
<td>Bal b/f</td>
<td>Cheque no 816078</td>
<td>Bank Giro credit</td>
<td>Bank Giro credit</td>
<td>Cheque no 816079</td>
<td>Direct debit</td>
<td>Bank charges</td>
<td>Direct debit</td>
<td>Cheque no 816081</td>
<td>SO payment</td>
<td>BACS payment</td>
<td>CHAPS payment</td>
<td>Interest</td>
</tr>
<tr class="carousel-cell">
<th>Debit</th>
<td>£</td>
<td> </td>
<td>800</td>
<td> </td>
<td> </td>
<td>1,864</td>
<td>700</td>
<td>52</td>
<td>400</td>
<td>1,290</td>
<td>300</td>
<td>100</td>
<td>70</td>
<td> </td>
</tr>
<tr class="carousel-cell">
<th>Credit</th>
<td>£</td>
<td> </td>
<td>2,000</td>
<td>2,500</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>20</td>
</tr>
<tr class="carousel-cell">
<th>Balance</th>
<td>£</td>
<td>8,196 C</td>
<td>7,396 C</td>
<td>9,396 C</td>
<td>12,896 C</td>
<td>11,032 C</td>
<td>10,332 C</td>
<td>10,280 C</td>
<td>9,880 C</td>
<td>8,590 C</td>
<td>8,290 C</td>
<td>8,190 C</td>
<td>8,120 C</td>
<td>8,140 C</td>
</tr>
</table>
</div>
The CSS for both looks like this
.table-head {
float: left;
width: 80px;
border-right: 2px solid #333;
border-collapse: collapse
}
.table-scroll {
float: left;
width: calc(100% - 81px);
border-top: 1px solid #333;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
background-color: #AAA;
}
.table-scroll table {
margin-top: -1px;
width: 30%;
min-width: 300px;
max-width: 40%;
border-collapse: collapse;
}
th {
text-align: left;
background-color: #f2f2f2;
color: #0076BF;
}
th, td {
padding: 10px;
border: 1px solid #333;
background-clip: padding-box;
}
td {
background-color: #fff;
}
And the flickity config
var elem = document.querySelector('.carousel');
var flkty = new Flickity( elem, {
// options
freeScroll: true,
contain: true,
prevNextButtons: false,
groupCells: true,
cellAlign: 'left'
});
Both are displayed on codepen, multiple tables https://codepen.io/joshuaserpis/pen/ZEojLKR
Single table https://codepen.io/joshuaserpis/pen/oNoOgYN