子表格单元格与父表格表头单元格未对齐问题排查

问题说明 #

现有父、子两个嵌套表格，需让子表格的数据列与父表格的表头单元格精准对齐。由于该结构用于Odoo且关联了JS代码，无法修改现有代码结构（如移除子表格），多次尝试后仍未实现正确对齐效果。需注意：Account、Partner、Subject列需根据表格内容自动调整宽度。

当前效果：子表格的列与父表格表头错位，比如子表格第一列（账号编号）未和父表格的Account表头对齐，各列宽度不匹配导致整体排版混乱。

原始HTML代码 #

<!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>

解决方法 #

通过添加自定义CSS，让子表格完全继承父表格的列宽，同时消除默认样式的干扰：

1. 在<head>标签内添加以下CSS代码：

<style>
/* 父表格固定列宽，确保列宽稳定 */
.table.ks_parent-table {
    table-layout: fixed;
    width: 100% !important;
    border-collapse: collapse;
}
/* 子表格容器清除额外间距 */
.ks_py-mline-table-div {
    padding: 0 !important;
    margin: 0 !important;
}
/* 子表格完全继承父表格宽度，去掉默认内边距 */
.ks_py-mline-table-div .table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse;
}
.ks_py-mline-table-div .table td {
    padding: 8px !important; /* 和父表格保持一致的内边距 */
    box-sizing: border-box;
}
/* 让Account、Partner、Subject列自动适应内容 */
.table.ks_parent-table th:nth-child(1),
.ks_py-mline-table-div .table td:nth-child(1) {
    width: auto;
    white-space: nowrap;
}
.table.ks_parent-table th:nth-child(4),
.ks_py-mline-table-div .table td:nth-child(4) {
    width: auto;
    white-space: nowrap;
}
.table.ks_parent-table th:nth-child(5),
.ks_py-mline-table-div .table td:nth-child(5) {
    width: auto;
    white-space: nowrap;
}
</style>

2. 给父表格添加ks_parent-table类：

<table style='background-color:white;color:#4A4F59;padding:20px;border-spacing: 0;' 
    class="table ks_parent-table" cellspacing="0" width="100%">

修改后，子表格的每一列会与父表格表头精准对齐，Account、Partner、Subject列会根据内容自动调整宽度，其余列均分剩余空间。

内容的提问来源于stack exchange，提问作者Aneeq ul Haq