如何在Odoo场景下使子表格td与父表格th对齐

问题背景 #

现有父表格与子表格嵌套结构（Odoo环境下，因JS依赖无法修改HTML结构），需要让子表格的数据列与父表格的表头精确对齐。当前HTML结构如下：

<!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/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style type="text/css">
        
    </style>
</head>
<body>
    <table id="data-lines" class="table ks_table_cj0" style='border-spacing: 0;' 
        cellspacing="0" width="100%">
        <thead class="ks_thead">
            <tr>
                <th colspan="8">Journal (code)</th>
                <th class="">Debit</th>
                <th class="">Credit</th>
                <th class="">Balance</th>
                <th class=""></th>
            </tr>
        </thead>
        <tbody>
            <tr style='background-color:white;color:#4A4F59;padding:20px' 
                class="ks_cj-py-mline" >
                <td colspan="8">
                    <i class="con_folded fa fa-caret-right" role="img" 
                        aria-label="Unfolded" title="Unfolded"/>
                    <i style='display:none' class="con_unfolded fa fa-caret-down" 
                        role="img" aria-label="Unfolded" title="Unfolded">    
                    </i>
                    <span>
                        Account Receivable 124000 
                    </span>
                </td>
                <td class="ks_amt ">
                    <span>$7,270.00</span>
                </td>
                <td class="ks_amt">
                    <span>$7,270.00</span>
                </td>
                <td class="ks_amt">
                    <span>$7,270.00</span>
                </td>
                <td class="ks_amt">
                    
                </td>
            </tr>

            <tr>
                <td colspan="12" class="p-0">
                    <ul class="ks_py-mline-ul">
                       
                    </ul>
                    <div class="ks_py-mline-table-div">
                        <table class="table ks-mline-data-table  display compact">
                            <thead class="ks_thead">
                                <tr>
                                    <th  colspan="12">Account Name</th>
                                    <th class="">Debit</th>
                                    <th class="">Credit</th>
                                    <th  colspan="2" class="">Balance</th>
                                </tr>
                            </thead>
                            <tbody>
                                
                                <tr>
                                    <td  colspan="12">
                                        
                                        <div class="dropdown">
                                            <a data-toggle="dropdown" href="#">
                                                <span t-att-data-move-id="account_line.id">
                                                    <t t-esc="account_line.name"/>
                                                </span>
                                                <i class="fa fa-caret-down" role="img" aria-label="Unfolded"
                                                   title="Unfolded"/>
                                            </a>
                                            
                                            <ul class="dropdown-menu p-2" role="menu">
                                                <li role="presentation">
                                                    <a  class="ks_ks_view-source" tabindex="1" >
                                                        General Ledger
                                                    </a>
                                                </li>
                                            </ul>
                                            
                                        </div>
                                        
                                    </td>

                                    <td t-att-style="style" class="ks_amt">
                                        <span>$7,27</span>
                                    </td>
                                    <td t-att-style="style" class="ks_amt">
                                       <span>$7,2</span>
                                    </td>
                                    <td t-att-style="style" class="ks_amt">
                                        <span>$722</span>
                                    </td>
                                    <td t-att-style="style" class="ks_amt">
                                        <span>$7</span>
                                    </td>
                                </tr>
                                
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr> 
        </tbody>
    </table>
</body>
</html>

解决方案 #

通过CSS固定表格布局并匹配列宽，实现子表格与父表格的列对齐：

/* 父表格启用固定布局，确保列宽稳定 */
#data-lines {
    table-layout: fixed;
}

/* 父表格的数值列设置固定宽度并右对齐 */
#data-lines .ks_amt {
    width: 120px;
    text-align: right;
}

/* 子表格容器移除内边距，避免偏移 */
.ks_py-mline-table-div {
    padding: 0;
    margin: 0;
}

/* 子表格继承父表格宽度，启用固定布局 */
.ks-mline-data-table {
    table-layout: fixed;
    width: 100%;
    margin: 0;
}

/* 子表格的Account Name列占用父表格前8列+空列的总宽度 */
.ks-mline-data-table thead th:first-child,
.ks-mline-data-table tbody td:first-child {
    width: calc(100% - 120px * 4); /* 总宽度减去4个数值列的宽度总和 */
}

/* 子表格的数值列与父表格保持一致宽度和对齐方式 */
.ks-mline-data-table .ks_amt {
    width: 120px;
    text-align: right;
}

关键说明 #

1. table-layout: fixed：强制表格按指定列宽渲染，避免内容自动调整列宽导致的对齐偏差。
2. 统一数值列宽度：父、子表格的Debit、Credit等数值列设置相同固定宽度，保证对齐精度。
3. 计算名称列宽度：用表格总宽度减去所有数值列的宽度总和，让名称列恰好匹配父表格前8列的空间。
4. 清理容器样式：移除子表格容器的内边距和外边距，避免额外偏移。

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