<div class="overflow-x-auto h-96">
<table class="table table-md table-pin-rows">
<thead>
<tr>
<th>A</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ant-Man</td>
</tr>
<tr>
<td>Aquaman</td>
</tr>
<tr>
<td>Asterix</td>
</tr>
<tr>
<td>The Atom</td>
</tr>
<tr>
<td>The Avengers</td>
</tr>
</tbody>
<thead>
<tr>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>Batgirl</td>
</tr>
<tr>
<td>Batman</td>
</tr>
<tr>
<td>Batwoman</td>
</tr>
<tr>
<td>Black Canary</td>
</tr>
<tr>
<td>Black Panther</td>
</tr>
</tbody>
<thead>
<tr>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>Captain America</td>
</tr>
<tr>
<td>Captain Marvel</td>
</tr>
<tr>
<td>Catwoman</td>
</tr>
<tr>
<td>Conan the Barbarian</td>
</tr>
</tbody>
<thead>
<tr>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>Daredevil</td>
</tr>
<tr>
<td>The Defenders</td>
</tr>
<tr>
<td>Doc Savage</td>
</tr>
<tr>
<td>Doctor Strange</td>
</tr>
</tbody>
<thead>
<tr>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>Elektra</td>
</tr>
</tbody>
<thead>
<tr>
<th>F</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fantastic Four</td>
</tr>
</tbody>
<thead>
<tr>
<th>G</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ghost Rider</td>
</tr>
<tr>
<td>Green Arrow</td>
</tr>
<tr>
<td>Green Lantern</td>
</tr>
<tr>
<td>Guardians of the Galaxy</td>
</tr>
</tbody>
<thead>
<tr>
<th>H</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hawkeye</td>
</tr>
<tr>
<td>Hellboy</td>
</tr>
<tr>
<td>Incredible Hulk</td>
</tr>
</tbody>
<thead>
<tr>
<th>I</th>
</tr>
</thead>
<tbody>
<tr>
<td>Iron Fist</td>
</tr>
<tr>
<td>Iron Man</td>
</tr>
</tbody>
<thead>
<tr>
<th>M</th>
</tr>
</thead>
<tbody>
<tr>
<td>Marvelman</td>
</tr>
</tbody>
<thead>
<tr>
<th>R</th>
</tr>
</thead>
<tbody>
<tr>
<td>Robin</td>
</tr>
<tr>
<td>The Rocketeer</td>
</tr>
</tbody>
<thead>
<tr>
<th>S</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Shadow</td>
</tr>
<tr>
<td>Spider-Man</td>
</tr>
<tr>
<td>Sub-Mariner</td>
</tr>
<tr>
<td>Supergirl</td>
</tr>
<tr>
<td>Superman</td>
</tr>
</tbody>
<thead>
<tr>
<th>T</th>
</tr>
</thead>
<tbody>
<tr>
<td>Teenage Mutant Ninja Turtles</td>
</tr>
<tr>
<td>Thor</td>
</tr>
</tbody>
<thead>
<tr>
<th>W</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Wasp</td>
</tr>
<tr>
<td>Watchmen</td>
</tr>
<tr>
<td>Wolverine</td>
</tr>
<tr>
<td>Wonder Woman</td>
</tr>
</tbody>
<thead>
<tr>
<th>X</th>
</tr>
</thead>
<tbody>
<tr>
<td>X-Men</td>
</tr>
</tbody>
<thead>
<tr>
<th>Z</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zatanna</td>
</tr>
<tr>
<td>Zatara</td>
</tr>
</tbody>
</table>
</div>
@jrmc.table({ pinRows: true, height: 96 })
<thead>
<tr>
<th>A</th>
</tr>
</thead>
<tbody>
<tr><td>Ant-Man</td></tr>
<tr><td>Aquaman</td></tr>
<tr><td>Asterix</td></tr>
<tr><td>The Atom</td></tr>
<tr><td>The Avengers</td></tr>
</tbody>
<thead>
<tr>
<th>B</th>
</tr>
</thead>
<tbody>
<tr><td>Batgirl</td></tr>
<tr><td>Batman</td></tr>
<tr><td>Batwoman</td></tr>
<tr><td>Black Canary</td></tr>
<tr><td>Black Panther</td></tr>
</tbody>
<thead>
<tr>
<th>C</th>
</tr>
</thead>
<tbody>
<tr><td>Captain America</td></tr>
<tr><td>Captain Marvel</td></tr>
<tr><td>Catwoman</td></tr>
<tr><td>Conan the Barbarian</td></tr>
</tbody>
<thead>
<tr>
<th>D</th>
</tr>
</thead>
<tbody>
<tr><td>Daredevil</td></tr>
<tr><td>The Defenders</td></tr>
<tr><td>Doc Savage</td></tr>
<tr><td>Doctor Strange</td></tr>
</tbody>
<thead>
<tr>
<th>E</th>
</tr>
</thead>
<tbody>
<tr><td>Elektra</td></tr>
</tbody>
<thead>
<tr>
<th>F</th>
</tr>
</thead>
<tbody>
<tr><td>Fantastic Four</td></tr>
</tbody>
<thead>
<tr>
<th>G</th>
</tr>
</thead>
<tbody>
<tr><td>Ghost Rider</td></tr>
<tr><td>Green Arrow</td></tr>
<tr><td>Green Lantern</td></tr>
<tr><td>Guardians of the Galaxy</td></tr>
</tbody>
<thead>
<tr>
<th>H</th>
</tr>
</thead>
<tbody>
<tr><td>Hawkeye</td></tr>
<tr><td>Hellboy</td></tr>
<tr><td>Incredible Hulk</td></tr>
</tbody>
<thead>
<tr>
<th>I</th>
</tr>
</thead>
<tbody>
<tr><td>Iron Fist</td></tr>
<tr><td>Iron Man</td></tr>
</tbody>
<thead>
<tr>
<th>M</th>
</tr>
</thead>
<tbody>
<tr><td>Marvelman</td></tr>
</tbody>
<thead>
<tr>
<th>R</th>
</tr>
</thead>
<tbody>
<tr><td>Robin</td></tr>
<tr><td>The Rocketeer</td></tr>
</tbody>
<thead>
<tr>
<th>S</th>
</tr>
</thead>
<tbody>
<tr><td>The Shadow</td></tr>
<tr><td>Spider-Man</td></tr>
<tr><td>Sub-Mariner</td></tr>
<tr><td>Supergirl</td></tr>
<tr><td>Superman</td></tr>
</tbody>
<thead>
<tr>
<th>T</th>
</tr>
</thead>
<tbody>
<tr><td>Teenage Mutant Ninja Turtles</td></tr>
<tr><td>Thor</td></tr>
</tbody>
<thead>
<tr>
<th>W</th>
</tr>
</thead>
<tbody>
<tr><td>The Wasp</td></tr>
<tr><td>Watchmen</td></tr>
<tr><td>Wolverine</td></tr>
<tr><td>Wonder Woman</td></tr>
</tbody>
<thead>
<tr>
<th>X</th>
</tr>
</thead>
<tbody>
<tr><td>X-Men</td></tr>
</tbody>
<thead>
<tr>
<th>Z</th>
</tr>
</thead>
<tbody>
<tr><td>Zatanna</td></tr>
<tr><td>Zatara</td></tr>
</tbody>
@end
Doc : daisyui table
Table can be used to show a list of data in a table format.
| Class name | Type | |
|---|---|---|
| table | Component | For <table> element |
| table-zebra | Modifier | For the active tab |
| active | Modifier | For <tr> to highlight current row |
| hover | Modifier | For <tr> to highlight current row on hover |
| table-pin-rows | Modifier | For <table> to make all the rows inside <thead> and <tfoot> sticky |
| table-pin-cols | Modifier | For <table> to make all the <th> columns sticky |
| table-xs | Responsive | Extra small size |
| table-sm | Responsive | Small size |
| table-md | Responsive | Normal size |
| table-lg | Responsive | Large size |