HTML-表列宽度被忽略-堆栈溢出

顺晟科技

2022-10-19 12:18:46

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

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

我查看了chrome developer tools元素，看看是否能弄清楚外部表中的宽度是如何工作的，但我没有看到它从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>

顺晟科技：

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

上一篇：HTML-CSS表，100%宽度和列下一篇：HTML-悬停时按钮底部边框消失-堆

网站建设

Html

HTML-表列宽度被忽略-堆栈溢出