Wisp CSS GitHub Logo

Table

Applies styles to make a table for displaying data.

<table class="c-table">
	<thead>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
			<th>Header 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Data 1</td>
			<td>Data 2</td>
			<td>Data 3</td>
		</tr>
		<tr>
			<td>Data 1</td>
			<td>Data 2</td>
			<td>Data 3</td>
		</tr>
	</tbody>
</table>
Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3

Modifiers ​

Border Cells ​

Applies a thin border around table cells.

<table class="c-table c-table--border-cells">
	<thead>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
			<th>Header 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Data 1</td>
			<td>Data 2</td>
			<td>Data 3</td>
		</tr>
		<tr>
			<td>Data 1</td>
			<td>Data 2</td>
			<td>Data 3</td>
		</tr>
	</tbody>
</table>
Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3

Border rows

Applies a thin border between table rows.

<table class="c-table c-table--border-rows">
	<thead>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
			<th>Header 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Data 1</td>
			<td>Data 2</td>
			<td>Data 3</td>
		</tr>
		<tr>
			<td>Data 1</td>
			<td>Data 2</td>
			<td>Data 3</td>
		</tr>
	</tbody>
</table>
Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3

Stripe

Applies an alternative background color for even rows.

<table class="c-table c-table--stripe">
	<thead>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
			<th>Header 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Data 1</td>
			<td>Data 2</td>
			<td>Data 3</td>
		</tr>
		<tr>
			<td>Data 1</td>
			<td>Data 2</td>
			<td>Data 3</td>
		</tr>
	</tbody>
</table>
Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3