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>

Options

Row Spacing

Apply classes .table-compact or .table-comfortable to the table for tighter or looser row spacing.

html 
<table class="table-compact">...</table>

Hover Styles

Apply the .table-hover class to add a subtle hover style which can be helpful when scanning data horizontally. You can also use the .table-interactive class if the table rows is intended to be interactive on click. Avoid using both classes at the same time.

html 
<table class="table-interactive">...</table>

Row Checked

Apply to a table body row to indicate an active selection state.

html 
<tr class=".table-row-checked">...</tr>

Fit Cell Width

Use the .table-cell-fit class on a cell element to fit the cell to the content widths. This can be useful for small columns that contain elements such as avatars or IDs. Be sure to apply to both the table header and table cell.

html 
<th class="table-cell-fit">Avatar</th>
html 
<td class="table-cell-fit">(avatar)</td>

Sorting

Classes for sorting ascending or descending are available. Apply these to the table head elements.

html 
<th class="table-sort-asc">Skeleton</th>
html 
<th class="table-sort-dsc">Skeleton</th>

See Also

A simple data-driven table component.

Tables Component →