Skip to main content Accessibility Feedback
Skip to Documentation Content
Getting Started
Customizing
Tools
Layout
Content
Forms
Components
Utilities
About
Documentation
Getting Started
Customizing
Tools
Layout
Content
Forms
Components
Utilities
About

Tables

Kelp includes simple, easy-to-read styles for table elements.

Default Styles

Tables look good out-of-the-box without any classes.

First Name Last Name Super Hero
Peter Parker Spiderman
Bruce Wayne Batman
Clark Kent Superman 
<table>
	<thead>
		<tr>
			<th scope="col">First Name</th>
			<th scope="col">Last Name</th>
			<th scope="col">Super Hero</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Peter</td>
			<td>Parker</td>
			<td>Spiderman</td>
		</tr>
		<tr>
			<td>Bruce</td>
			<td>Wayne</td>
			<td>Batman</td>
		</tr>
		<tr>
			<td>Clark</td>
			<td>Kent</td>
			<td>Superman</td>
		</tr>
	</tbody>
</table>

Zebra Striping

You can add zebra striping for easier readability with the .table-striped class.

First Name Last Name Super Hero
Peter Parker Spiderman
Bruce Wayne Batman
Clark Kent Superman 
<table class="table-striped">
	<thead>
		<tr>
			<th scope="col">First Name</th>
			<th scope="col">Last Name</th>
			<th scope="col">Super Hero</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Peter</td>
			<td>Parker</td>
			<td>Spiderman</td>
		</tr>
		<tr>
			<td>Bruce</td>
			<td>Wayne</td>
			<td>Batman</td>
		</tr>
		<tr>
			<td>Clark</td>
			<td>Kent</td>
			<td>Superman</td>
		</tr>
	</tbody>
</table>

Colors

You can use the .primary, .secondary, .success, .danger, and .warning classes to change the color of table borders and zebra stripes.

First Name Last Name Super Hero
Peter Parker Spiderman
Bruce Wayne Batman
Clark Kent Superman 
<table class="table-striped secondary">
	<!-- ... -->
</table>

You can combine the color classes with the .vivid class or the .outline class to create a variety of table styles.

First Name Last Name Super Hero
Peter Parker Spiderman
Bruce Wayne Batman
Clark Kent Superman
First Name Last Name Super Hero
Peter Parker Spiderman
Bruce Wayne Batman
Clark Kent Superman 
<table class="table-striped secondary vivid">
	<!-- ... -->
</table>

<table class="table-striped secondary outline">
	<!-- ... -->
</table>

Horizontal Scroll

The .scroll-horizontal class enabled horizontal scrolling (if needed) on an element, without creating overflow issues on the rest of the document.

The most common use case for this class is with wide tables that might be wider than their parent element on smaller screens.

(You might have to make the browser window really small to see it on the example below.)

First Last Hero Name Super Power Costume Color
Peter Parker Spiderman Spider Stuff Red and Blue
Bruce Wayne Batman Bat Stuff Black
Tony Stark Ironman Iron Stuff Red and Yellow 
<div class="scroll-horizontal">
	<table>
		<!-- ... -->
	</table>
</div>