Table 忽略了列宽

Question

我不知道为什么我内心的 table 会忽略列宽。内部 table 的所有列最终都是相同的宽度。任何帮助或建议将不胜感激。宽度是根据返回的列数和类型生成的。

外部 table 有几百行，每个内部 table 有 50 到 100 行。将来我可能会添加某种过滤器来限制外部行的数量以提高性能。我不擅长 html，对 CSS 和 JavaScript 只有初步的了解，但从我读过的所有内容来看，这应该可行。

我查看了 chrome 开发人员工具元素，看看我是否可以弄清楚宽度在外部 table 中的工作原理，但我没有看到它从哪里获取来自colgroup的宽度，所以这似乎是一个死胡同。我可能对某些事情有基本的误解。

<!DOCTYPE html>
<html>
    <head>
        <style>
            th {
                text-align: left;
            }
            .change {
                background-color: gold ;
            }
        </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>
                <th width='2%'>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='100%'>
                        <summary>Children</summary>
                        <table width='100%'>
                            <colgroup>
                                <col width='5%' />
                                <col width='5%' />
                                <col width='10%' />
                                <col width='5%' />
                                <col width='5%' />
                                <col width='80%' />
                            </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>

Answer 1

您嵌入的 table 所有列的宽度都相同，这不是因为它是嵌入的 table，而是因为它的单元格包含 input 没有指定宽度的元素.由于缺乏规范，他们采用 Web 浏览器的默认样式规范。要使 table 单元格与指定的列宽匹配，您可以添加以下 CSS。根据您网页上其他 input 元素的上下文，您可能需要使用更具体的选择器。

input {
    width: 100%;
}

Table 忽略了列宽

Table column widths ignored

html

column-width