zalog / placeholder-loading

Simple and flexible, css only, content placeholder loading animation. https://zalog.github.io/placeholder-loading/
MIT License
1.48k stars 149 forks source link

Not working inside of table #5

Closed KypMon closed 5 years ago

KypMon commented 5 years ago

Hi, Thanks for your amazing plugin, it works very well until I try to use it inside of a table. Here is my sample code:

<div class="table-responsive-md">

            // after page rendered, the div for ph-item will appear here...

            <table class="table table-hover mb-0">

              <thead>
                <tr>
                  <th scope="col">header1</th>
                  <th scope="col">header2</th>
                  <th scope="col">header3</th>
                  <th scope="col">header4</th>
                  <th scope="col">header5</th>
                  <th scope="col">header6</th>
                </tr>
              </thead>

              <tbody id="users-body">
                  <div class="ph-item">
                    <div class="ph-col-12">
                      <div class="ph-picture"></div>
                    </div>
                  </div>
              </tbody>

            </table>
</div>

but after the page is rendered, the div.ph-item will appearing inside of div class="table-responsive-md" instead of tbody id="users-body", which is very strange. Appreicate with help of any kinds, thanks.

zalog commented 5 years ago

This is a html issue, you need to wrap it in a td or th tag. https://www.w3schools.com/tags/tag_tbody.asp

I hope it helps, happy coding!