Child table cell is not aligned with parent table heading cell

Aneeq ul Haq 0
Viewed 61

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.

The HTML code is Note: These columns should have more width depending upon their table data columns are Account, Partner, Subject

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>General Ledger</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 align_tables my-3">
        <table style='background-color:white;color:#4A4F59;padding:20px;border-spacing: 0;' 
            class="table" cellspacing="0" width="100%">
            <thead style='color: #4e4c4c;' class="ks_thead">
                <tr>
                    <th style="padding-bottom:20px">Account</th>
                    <th style="padding-bottom:20px">Date</th>
                    <th style="padding-bottom:20px">JRNL</th>
                    <th style="padding-bottom:20px">Partner</th>
                    <th style="padding-bottom:20px">Subject</th>
                    <th style="padding-bottom:20px">Debit</th>
                    <th style="padding-bottom:20px">Credit</th>
                    <th style="padding-bottom:20px">Balance</th>
                </tr>
            </thead> 
            <tbody style='font-size:14px;font-weight:normal'>
                <tr class="ks_py-mline" >
                    <td colspan="5">
                        <span>
                            120002 - Outstanding Receipts 
                        </span>
                    </td>
                    <td>
                        <span>$ 7,270.00</span>
                    </td>
                    
                    <td>
                        <span>$ 7,270.00</span>
                    </td>
                    
                    <td>
                        <span>$ 7,270.00</span>
                    </td>                     
                </tr>


                <tr>
                    <td  class="p-0"  colspan="12">
                        <ul class="ks_py-mline-ul m-0  ">
                            <li></li>
                        </ul>
                        <div class="ks_py-mline-table-div">
        
                            <table class="table">
                                
                                <tbody class='remove_body' style='font-size:12px'>
                                    
                                    <tr style='border-bottom: 1px solid #eee;'>
                                        <td>
                                           <span>BNK1/2022/09/0002</span>
                                        </td>

                                        <td >
                                            <span>09/18/2022 </span>
                                        </td>
                                        
                                        <td>
                                            <span>  BNK1 </span>
                                        </td>

                                        <td>
                                            <span>  Acts Software Distribution Limited - 1223 </span>
                                        </td>

                                        <td>
                                            <span>  INV/2022/00005-303 </span>
                                        </td>
                                      
                                        <td>
                                           <span>  $ 7,270.00 </span>
                                        </td>

                                        <td>
                                            <span>  $ 7,270.00 </span>
                                        </td>
                                        
                                        <td>
                                            -
                                        </td>

                                    </tr>
                                  
                                </tbody>
                            </table>
                        </div>
                    </td>
                </tr> 
            </tbody>
        </table>
        </div>
</body>
</html>

Current Output of the table

html-table jquery javascript css html
1 Answers

So even though these tables are seperated, we can still use some styling to at least make it look like it's one table. But yeah the structure is quite bad and it would help a lot if you could make sure each row has always the same amount of columns. That the first row has 4 columns and the second one 8 does make this kind of a Hail Mary.

But the general idea is you give each column the width it needs.

/* Default to hide some generated styling*/
ul{ display:none; }
.p-0{ padding: 0!important; }
tbody{ font-size: 14px!important; }
table table {margin-bottom: 0!important; }
table table td { border-top: none!important; }

/*A small zoom(out) and min-width if screen is not big enough */
.container-fluid{ zoom: 0.8; min-width: 1100px; }
/* Default for 8 columns if they all would be equal*/
th, td{ width: 12.5%; }

/*The "Magic", specific widths for each column */
/*Obviously works best if each row has 8 columns*/
/*Play with it, but make sure it adds up to 100%*/
th:nth-child(1),
td:nth-child(1){
  width: 20%;
}

th:nth-child(2),
td:nth-child(2){
  width: 10%;
}

th:nth-child(3),
td:nth-child(3){
  width: 5%;
}

th:nth-child(4),
td:nth-child(4){
  width: 20%;
}

th:nth-child(5),
td:nth-child(5){
  width: 15%;
}

th:nth-child(6),
td:nth-child(6),
th:nth-child(7),
td:nth-child(7),
th:nth-child(8),
td:nth-child(8){
  width: 10%;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>General Ledger</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 align_tables my-3">
        <table style='background-color:white;color:#4A4F59;padding:20px;border-spacing: 0;' 
            class="table" cellspacing="0" width="100%">
            <thead style='color: #4e4c4c;' class="ks_thead">
                <tr>
                    <th style="padding-bottom:20px">Account</th>
                    <th style="padding-bottom:20px">Date</th>
                    <th style="padding-bottom:20px">JRNL</th>
                    <th style="padding-bottom:20px">Partner</th>
                    <th style="padding-bottom:20px">Subject</th>
                    <th style="padding-bottom:20px">Debit</th>
                    <th style="padding-bottom:20px">Credit</th>
                    <th style="padding-bottom:20px">Balance</th>
                </tr>
            </thead> 
            <tbody style='font-size:14px;font-weight:normal'>
                <tr class="ks_py-mline" >
                    <td colspan="5">
                        <span>
                            120002 - Outstanding Receipts 
                        </span>==
                    </td>
                    <td>
                        <span>$ 7,270.00</span>
                    </td>
                    
                    <td>
                        <span>$ 7,270.00</span>
                    </td>
                    
                    <td>
                        <span>$ 7,270.00</span>
                    </td>                     
                </tr>


                <tr>
                    <td  class="p-0"  colspan="12">
                        <ul class="ks_py-mline-ul m-0  ">
                            <li></li>
                        </ul>
                        <div class="ks_py-mline-table-div">
        
                            <table class="table">
                                
                                <tbody class='remove_body' style='font-size:12px'>
                                    
                                    <tr style='border-bottom: 1px solid #eee;'>
                                        <td>
                                           <span>BNK1/2022/09/0002</span>
                                        </td>

                                        <td >
                                            <span>09/18/2022 </span>
                                        </td>
                                        
                                        <td>
                                            <span>  BNK1 </span>
                                        </td>

                                        <td>
                                            <span>  Acts Software Distribution Limited - 1223 </span>
                                        </td>

                                        <td>
                                            <span>  INV/2022/00005-303 </span>
                                        </td>
                                      
                                        <td>
                                           <span>  $ 7,270.00 </span>
                                        </td>

                                        <td>
                                            <span>  $ 7,270.00 </span>
                                        </td>
                                        
                                        <td>
                                            -
                                        </td>

                                    </tr>
                                  
                                </tbody>
                            </table>
                        </div>
                    </td>
                </tr> 
            </tbody>
        </table>
        </div>
</body>
</html>

T-S0
Related