Table column widths ignored-CodePudding

I have no idea why my inner table is ignoring the column widths. All the columns of the inner table end up being the same width. Any help or suggestions would be appreciated. The widths are generated based on the number and type of columns returned.

The outer table has a couple of hundred rows, and each inner table would have 50 to 100 rows. I'll probably add a filter of some sort in the future to limit the number of outer rows to improve performance. I'm not great at html and have only a rudimentary understanding of CSS and JavaScript, but from everything I've read, this should work.

I've looked at the chrome developer tools elements to see if I can figure out how the widths work in the outer table, but I'm not seeing where it picks up the widths from the colgroup, so that appears to be a dead end. I probably have a base misunderstanding of something.

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

CodePudding user response：

Your embedded table is showing the same width for all columns not because it is an embedded table, but because its cells contain input elements that do not have a specified width. Because of this lack of specification, they are adopting the default style specifications from the web browser. To make your table cells match your specified column widths, you can add the following CSS. Depending on the context of other input elements on your webpage, you may want to use a more specific selector.

input {
    width: 100%;
}