html 标记未在 DOM 中的正确位置创建

Question

我想使用 CSS 创建 Accordion 3 和 HTML5 ，但我遇到了我的 HTML 标记在 DOM 中的位置问题

这是我的 HTML(不要关注 PHP):

<div id="listeChecklist" class="panel panel-primary">
    <div class="panel-heading">Check liste</div>
    <div class="panel-body">                
        <table class="table">
            <thead>
                <tr>
                    <th>Date</th> 
                    <th>Heure</th>
                    <th>Machine</th>
                    <th>Référence produit</th> 
                    <th>Personne</th>
                </tr>
            </thead>
            <tbody>
                <section class="ac-container">
                    <?php
                    while($row = $requete->fetch()){ ?>
                        <div>
                            <tr>
                                <td><?php echo $row['date']; ?></td>
                                <td><?php echo $row['heure']; ?></td>
                                <td><?php echo $row['machine']; ?></td>
                                <td><?php echo $row['ref']; ?></td>
                                <td><?php echo $row['nom']." ".$row['prenom']; ?></td>
                            </tr>
                        </div>
                    <?php
                    } ?>
                </section>
            </tbody>
        </table>
    </div>
</div>

所以在我的 <table> <tbody>我有一个部分将作为我的容器，在 while 循环中(对于我在数据库中找到的每个元素)我创建了一个 div 来包装来自数据库的元素。

但是当我在 Internet 上打开我的页面时，我没有获得我想要的 DOM:

<div id="listeChecklist" class="panel panel-primary">
    <div class="panel-heading"></div>
    <div class="panel-body">
        <section class="ac-container"></section>
        <table class="table">
            <thead></thead>
            <tbody></tbody>
        </table>
    </div>
</div>

您可以看到部分 在表格 之上。

我能解释一下我犯的错误吗？

谢谢。

Answer 1

section 和 div 元素不能是 table、tbody、thead 的直接子元素 或 tr 元素 - 它们必须位于 th 或 td 内；尽管我认为这不是语义的。您的浏览器本身意识到您的 HTML 不正确，并试图通过将 section 元素完全移出您的 table 来修复它。

此外，section 和 div 元素可能没有 tr 子元素 - 但是，它们可以有子元素 table 元素。

我真的不知道你想通过将东西包装在 section 或 div 元素中来实现什么，但是 table 元素用于表示表格数据，仅此而已。

无效的 HTML

<table>
    <tbody>
        <section>...</section>
    </tbody>
</table>

有效的 HTML

<section>
    <table>
        <tbody>...</tbody>
    </table>
</section>