I have two tables parent and child now I want to link the child table data with the parent th. 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.
The HTML code is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
</style>
</head>
<body>
<table id="data-lines" style='border-spacing: 0;'
cellspacing="0" width="100%">
<thead >
<tr>
<th colspan="8">Journal (code)</th>
<th >Debit</th>
<th >Credit</th>
<th >Balance</th>
<th ></th>
</tr>
</thead>
<tbody>
<tr style='background-color:white;color:#4A4F59;padding:20px'
>
<td colspan="8">
<i role="img"
aria-label="Unfolded" title="Unfolded"/>
<i style='display:none'
role="img" aria-label="Unfolded" title="Unfolded">
</i>
<span>
Account Receivable 124000
</span>
</td>
<td >
<span>$7,270.00</span>
</td>
<td >
<span>$7,270.00</span>
</td>
<td >
<span>$7,270.00</span>
</td>
<td >
</td>
</tr>
<tr>
<td colspan="12" >
<ul >
</ul>
<div >
<table >
<thead >
<tr>
<th colspan="12">Account Name</th>
<th >Debit</th>
<th >Credit</th>
<th colspan="2" >Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="12">
<div >
<a data-toggle="dropdown" href="#">
<span t-att-data-move-id="account_line.id">
<t t-esc="account_line.name"/>
</span>
<i role="img" aria-label="Unfolded"
title="Unfolded"/>
</a>
<ul role="menu">
<li role="presentation">
<a tabindex="1" >
General Ledger
</a>
</li>
</ul>
</div>
</td>
<td t-att-style="style" >
<span>$7,27</span>
</td>
<td t-att-style="style" >
<span>$7,2</span>
</td>
<td t-att-style="style" >
<span>$722</span>
</td>
<td t-att-style="style" >
<span>$7</span>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
The output you can check in this link
CodePudding user response：
As you're using tables I assume you will be watching these mostly on larger screens. Then simple styling of the columns with some CSS will do the trick.
tbody th:first-child,
tbody td:first-child {
width: 40%;
}
tbody th,
tbody td {
width: 15%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
</style>
</head>
<body>
<table id="data-lines" style='border-spacing: 0;'
cellspacing="0" width="100%">
<thead >
<tr>
<th colspan="8">Journal (code)</th>
<th >Debit</th>
<th >Credit</th>
<th >Balance</th>
<th ></th>
</tr>
</thead>
<tbody>
<tr style='background-color:white;color:#4A4F59;padding:20px'
>
<td colspan="8">
<i role="img"
aria-label="Unfolded" title="Unfolded"/>
<i style='display:none'
role="img" aria-label="Unfolded" title="Unfolded">
</i>
<span>
Account Receivable 124000
</span>
</td>
<td >
<span>$7,270.00</span>
</td>
<td >
<span>$7,270.00</span>
</td>
<td >
<span>$7,270.00</span>
</td>
<td >
</td>
</tr>
<tr>
<td colspan="12" >
<ul >
</ul>
<div >
<table >
<thead >
<tr>
<th colspan="12">Account Name</th>
<th >Debit</th>
<th >Credit</th>
<th colspan="2" >Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="12">
<div >
<a data-toggle="dropdown" href="#">
<span t-att-data-move-id="account_line.id">
<t t-esc="account_line.name"/>
</span>
<i role="img" aria-label="Unfolded"
title="Unfolded"/>
</a>
<ul role="menu">
<li role="presentation">
<a tabindex="1" >
General Ledger
</a>
</li>
</ul>
</div>
</td>
<td t-att-style="style" >
<span>$7,27</span>
</td>
<td t-att-style="style" >
<span>$7,2</span>
</td>
<td t-att-style="style" >
<span>$722</span>
</td>
<td t-att-style="style" >
<span>$7</span>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>CodePudding user response：
Do you try use for parent element display: flex; align-item: center; justify-content: center? I should help