Ad

My HTML Is Rearranging Itself How Is This Happening?

- 1 answer

As the title says, my markup is rearranging itself. I have absolutely no idea how that works.

The accordion moves itself outside of the table, if you right click and inspect the table the markup shows it's actually moved.

I understand that this would make for some weird looking results, but it's a start to figuring out how to have accordion tables. I'm aiming to have a table row clickable and the accordion rolls out under it.

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

$('.ui.accordion')
  .accordion();
<script src="https://cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
<link target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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>[email protected]</td>
        <td>No</td>
      </tr>
      <tr id="test">
        <td>Jamie Harington</td>
        <td>January 11, 2014</td>
        <td>[email protected]</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>[email protected]</td>
        <td>Yes</td>
      </tr>
    </tbody>
  </table>
</div>

Ad

Answer

<div> is not a valid child of <tr>.

When browsers run into invalid markup they kick it out of current part of the dom tree...with unpredictable results.

Final answer...use valid html

Reference MDN - <tr> Usage Context

Ad
source: stackoverflow.com
Ad