Question

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

手风琴将自己移到桌子外面，如果右键单击并检查表格，标记显示它实际上已移动。

据我所知，这会产生一些奇怪的结果，但这是开始弄清楚如何使用手风琴表。我的目标是有一个可以点击的桌子行，手风琴在它下面滚动。

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>标记是实际的表格单元格。

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

2 个答案: