I have two tables parent and child now I want to link the child table data with the parent heading cell. I can't change the code structure like removing the child table because this is done in Odoo and also js link with this structure. I tried a lot but didn't achieve the correct output. In the parent, table columns should be aligned with the child to create some spaces in the parent for the first 4 th and td of the child table.
The HTML code is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Age Receivable</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<body>
<div class="container-fluid my-4">
<table style="border-spacing: 0;" id="data-lines" class="table ks-data-table-age" width="100%" cellspacing="0">
<thead class="ks_thead">
<tr>
<th colspan="4">Partners</th>
<th class="">
Not Due
</th>
<th class="">
1 - 30
</th>
<th class="">
31 - 60
</th>
<th class="">
61 - 90
</th>
<th class="">
91 - 120
</th>
<th class="">
121 - 180
</th>
<th class="">
180 +
</th>
<th class="">Total</th>
</tr>
</thead>
<tbody>
<tr class="ks-mline ks_pr-py-mline age_class" data-toggle="collapse" data-partner-id="3" data-target=".a3" aria-expanded="true">
<td colspan="4">
<i class="age_folded fa fa-caret-right" role="img" aria-label="Unfolded" title="Unfolded" style="display: none;"></i>
<i style="display: inline;" class="age_unfolded fa fa-caret-down" role="img" aria-label="Unfolded" title="Unfolded"></i>
<span>
Geneses Solution PTY Limited
</span>
</td>
<td class="ks_amt">
-
</td>
<td class="ks_amt">
$ 1,000.00
</td>
<td class="ks_amt">
-
</td>
<td class="ks_amt">
-
</td>
<td class="ks_amt">
-
</td>
<td class="ks_amt">
-
</td>
<td class="ks_amt">
-
</td>
<td class="ks_amt">
$ 1,000.00
</td>
</tr>
<tr class="a3 collapse show" style="">
<td colspan="12">
<ul class="ks_py-mline-ul"></ul>
<div class="ks_py-mline-table-div">
<table class="table">
<thead class="ks_thead">
<tr>
<th>Entry Label</th>
<th>Due Date</th>
<th>Journal</th>
<th>Account</th>
<th class="">
Not Due
</th>
<th class="">
1 - 30
</th>
<th class="">
31 - 60
</th>
<th class="">
61 - 90
</th>
<th class="">
91 - 120
</th>
<th class="">
121 - 180
</th>
<th class="">
180 +
</th>
</tr>
</thead>
<tbody>
<tr data-move-id="20">
<td>
<div class="dropdown">
<a data-toggle="dropdown" href="#">
<span data-move-id="20">
INV/2022/00004
</span>
<i class="fa fa-caret-down" role="img" aria-label="Unfolded" title="Unfolded"></i>
</a>
</div>
</td>
<td>
08/31/2022
</td>
<td>
Customer Invoices
</td>
<td>
Account Receivable
</td>
<td class="ks_amt">
-
</td>
<td class="ks_amt">
$ 1,000.00
</td>
<td class="ks_amt">
-
</td>
<td class="ks_amt">
-
</td>
<td class="ks_amt">
-
</td>
<td class="ks_amt">
-
</td>
<td class="ks_amt">
-
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Current output of the code is
