我的 HTML 正在重新排列，这是怎么回事？

Question

正如标题所说，我的标记正在重新排列。我完全不知道它是如何工作的。

如果您右键单击并检查 table，手风琴会自行移动到 table 之外，标记显示它实际上已移动。

我知道这会产生一些看起来很奇怪的结果，但这是弄清楚如何使用手风琴 tables 的开始。我的目标是让 table 行可点击，手风琴在它下面展开。

JSFiddle：https://jsfiddle.net/f6dn4pec/2/

$('.ui.accordion')
  .accordion();

<script src="https://cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>

<div>
  <table class="ui single line table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Registration Date</th>
        <th>E-mail address</th>
        <th>Premium Plan</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Lilki</td>
        <td>September 14, 2013</td>
        <td>jhlilk22@yahoo.com</td>
        <td>No</td>
      </tr>
      <tr id="test">
        <td>Jamie Harington</td>
        <td>January 11, 2014</td>
        <td>jamieharingonton@yahoo.com</td>
        <td>Stuff</td>
      </tr>
      <tr>
        <div class="ui styled accordion">
          <div class="title">
            <i class="dropdown icon"></i> What is a dog?
          </div>
          <div class="content">
            <p class="transition hidden">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
          </div>
        </div>        
      </tr>
      <tr>
        <td>Jill Lewis</td>
        <td>May 11, 2014</td>
        <td>jilsewris22@yahoo.com</td>
        <td>Yes</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

<div> 不是 <tr> 的有效子项。

当浏览器运行进入无效标记时，它们会将其踢出 dom 树的当前部分...结果不可预测。

最终答案...使用有效 html

引用MDN - <tr> Usage Context

Answer 2

手风琴 div 需要在 <td> 标签中。 <td> 标签是实际的 table 单元格。

我的 HTML 正在重新排列，这是怎么回事？

My HTML is rearranging itself how is this happening?

html

javascript

semantic-ui