Table Stable Dark theme

Tables present data sets in a comparable, readable and scannable way.

Basic table

<div class="overflow-x-auto">
  <table width="100%" role="grid" class="table ">
    <thead>
    </thead>
    <tbody>
      <tr>
        <td>Lorem ipsum</td>
        <td>dolor sit</td>
        <td>amet</td>
      </tr>
      <tr>
        <td>consectetur adipisicing</td>
        <td>elit sed do</td>
        <td>irure dolor</td>
      </tr>
      <tr>
        <td>reprehenderit</td>
        <td>voluptate velit esse</td>
        <td>sunt in culpa</td>
      </tr>
      <tr>
        <td>consequat</td>
        <td>exercitation ullamco</td>
        <td>incididunt ut labore</td>
      </tr>
      <tr>
        <td>Lorem ipsum</td>
        <td>dolor sit</td>
        <td>amet</td>
      </tr>
      <tr>
        <td>consectetur adipisicing</td>
        <td>elit sed do</td>
        <td>irure dolor</td>
      </tr>
    </tbody>
  </table>
</div>

Table with head

<div class="overflow-x-auto">
  <table width="100%" role="grid" class="table ">
    <thead>
      <tr role="row">
        <th scope="col" role="columnheader" aria-sort="none">Lorem ipsum</th>
        <th scope="col" role="columnheader" aria-sort="none">dolor sit</th>
        <th scope="col" role="columnheader" aria-sort="none">amet</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem ipsum</td>
        <td>dolor sit</td>
        <td>amet</td>
      </tr>
      <tr>
        <td>consectetur adipisicing</td>
        <td>&lt;a href&#x3D;&quot;&quot;&gt;elit sed do&lt;/a&gt;</td>
        <td>irure dolor</td>
      </tr>
      <tr>
        <td>reprehenderit</td>
        <td>voluptate velit esse</td>
        <td>sunt in culpa</td>
      </tr>
      <tr>
        <td>consequat</td>
        <td>exercitation ullamco</td>
        <td>incididunt ut labore</td>
      </tr>
      <tr>
        <td>Lorem ipsum</td>
        <td>dolor sit</td>
        <td>amet</td>
      </tr>
      <tr>
        <td>consectetur adipisicing</td>
        <td>elit sed do</td>
        <td>irure dolor</td>
      </tr>
    </tbody>
  </table>
</div>

Table on black background

<div class="overflow-x-auto">
  <table width="100%" role="grid" class="table dark">
    <thead>
      <tr role="row">
        <th scope="col" role="columnheader" aria-sort="none">Lorem ipsum</th>
        <th scope="col" role="columnheader" aria-sort="none">dolor sit</th>
        <th scope="col" role="columnheader" aria-sort="none">amet</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem ipsum</td>
        <td>dolor sit</td>
        <td>amet</td>
      </tr>
      <tr>
        <td>consectetur adipisicing</td>
        <td>&lt;a href&#x3D;&quot;&quot;&gt;elit sed do&lt;/a&gt;</td>
        <td>irure dolor</td>
      </tr>
      <tr>
        <td>reprehenderit</td>
        <td>voluptate velit esse</td>
        <td>sunt in culpa</td>
      </tr>
      <tr>
        <td>consequat</td>
        <td>exercitation ullamco</td>
        <td>incididunt ut labore</td>
      </tr>
      <tr>
        <td>Lorem ipsum</td>
        <td>dolor sit</td>
        <td>amet</td>
      </tr>
      <tr>
        <td>consectetur adipisicing</td>
        <td>elit sed do</td>
        <td>irure dolor</td>
      </tr>
    </tbody>
  </table>
</div>