Tables

Tailwind

Provides a set of styles for native HTML table elements.

@skeletonlabs/skeleton
Source Code
View Page Source

Examples

Position Name Symbol Weight
1 Hydrogen H 1.0079
2 Helium He 4.0026
3 Lithium Li 6.941
4 Beryllium Be 9.0122
5 Boron B 10.811
Total Weight 31.7747

Getting Started

Wrap a .table-container element around any native HTML table with the .table class applied to create a responsive table.

html 
<div class="table-container">
	<table class="table table-hover">
		<thead>
			<tr>
				<th>Position</th>
				<th>Name</th>
				<th>Symbol</th>
				<th>Weight</th>
			</tr>
		</thead>
		<tbody>
			{#each tableArr as row, i}
				<tr>
					<td>{row.position}</td>
					<td>{row.name}</td>
					<td>{row.symbol}</td>
					<td>{row.weight}</td>
				</tr>
			{/each}
		</tbody>
		<tfoot>
			<tr>
				<th colspan="3">Calculated Total Weight</th>
				<td>{totalWeight}</td>
			</tr>
		</tfoot>
	</table>
</div>

Additional Table Options

A simple data-driven table component.

Tables Component →

Powerful template-driven utility features for data tables.

Data Table Utilities →