CSS table loading overlay for tbody

From the CSS 2.1 spec:

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

A possible solution:

  • Set display:table; on the tbody and thead elements
  • Apply position:relative; to the tbody element instead of the table element
  • Move the :after pseudo-element from table to tbody so that it takes up 100% of the height of the tbody element

Updated Plunker: https://plnkr.co/edit/qOwmd9xJvwYdJ37wsKWX?p=preview


here's one for loading individual table rows.

tr.loading {
  background-image: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, .05) 50%);
  background-size: 200% 100%;
  animation: loading 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

tr.loading td {
  opacity: .45;
  pointer-events: none;
}

@keyframes loading {
  0% {
    background-position: 0;
  }
  50% {
    background-position: -30%;
  }
  80% {
    background-position: -100%;
  }
  100% {
    background-position: -200%;
  }
}

table {
  font-family: sans-serif;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #ddd;
  padding: 8px;
}
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr class="loading">
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

Tags:

Html

Css

Css Tables

Css Position

Recent Posts