HTML嵌套内表忽略colgroup列宽设置、所有列等宽如何解决

问题根因 #

1. 内部表格列数与colgroup定义不匹配：你给内部表格的colgroup只定义了6个<col>的宽度，但内部thead里实际有7个<th>，缺少对应Desc列的宽度配置，导致浏览器无法正确分配列宽，默认会平均分配剩余宽度。
2. 未指定表格布局模式：浏览器默认表格使用table-layout: auto布局，会优先根据单元格内容调整宽度，你设置的colgroup宽度优先级很低，很容易被内容覆盖失效。
3. 无效属性使用：<details>标签本身不支持原生的width属性，你写的width='100%'不会生效，会导致内部表格无法撑满父容器可用宽度。

修复方案 #

直接修改你的CSS配置和对应标签属性即可，以下是完整可运行的修复后代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
            th {
                text-align: left;
            }
            .change {
                background-color: gold ;
            }
            /* 固定表格布局，保证colgroup宽度生效 */
            table {
                table-layout: fixed;
                width: 100%;
            }
            /* 让details撑满父容器 */
            details {
                width: 100%;
            }
            /* 可选：单元格内容溢出自动换行，避免内容撑宽列 */
            td, th {
                overflow: hidden;
                word-wrap: break-word;
            }
        </style>
    </head>
    <body>
<form action="" method="POST">
    <h2>Heading</h2>
    <table id="tableID">
        <colgroup>
            <col width='5%' />
            <col width='15%' />
            <col width='10%' />
            <col width='70%' />
        </colgroup>
        <thead>
            <tr>
                <!-- 删除和colgroup冲突的th width属性，以colgroup配置为准 -->
                <th>Flag</th>
                <th>Name</th>
                <th>Key</th>
                <th>Children</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type='checkbox' checked value='Y' /></td>
                <td><input type='text' value='Activity' /></td>
                <td><input type='text' value='UNQ' class='change' /></td>
                <td>
                    <!-- 删除details上无效的width属性 -->
                    <details>
                        <summary>Children</summary>
                        <table>
                            <colgroup>
                                <!-- 新增第7个col对应Desc列，调整宽度总和为100% -->
                                <col width='5%' />
                                <col width='5%' />
                                <col width='10%' />
                                <col width='5%' />
                                <col width='5%' />
                                <col width='10%' />
                                <col width='60%' />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>Flag</th>
                                    <th>Seq</th>
                                    <th>Name</th>
                                    <th>Key</th>
                                    <th>Mandatory</th>
                                    <th>Parent</th>
                                    <th>Desc</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><input type='text' value='N' /></td>
                                    <td><input type='text' value='1' /></td>
                                    <td><input type='text' value='AddBy' /></td>
                                    <td><input type='text' value='N' /></td>
                                    <td><input type='text' value='N' class='change' /></td>
                                    <td><input type='text' value='N' /></td>
                                    <td><input type='text' value='Add By' /></td>
                                </tr>
                            </tbody>
                        </table>
                    </details>
                </td>
            </tr>
        </tbody>
    </table>
    <input type="submit" value="Submit" />
</form>
</html>

额外优化建议 #

后续动态生成列宽时，只要保证<colgroup>下的<col>数量和表头<th>数量完全一致，设置的宽度就可以正常生效。table-layout: fixed布局本身也能提升大表格的渲染速度，因为浏览器只需要解析第一行的列宽就可以完成整个表格的布局，不需要遍历所有单元格计算宽度，配合你计划新增的过滤功能可以进一步优化性能体验。

内容的提问来源于stack exchange，提问作者Gord Gray