91¶ÌÊÓƵ

skip to content

Tables

Basics

This is mostly just a fresh new look for tables. It wasn't originally planned, but it was added after I saw the need while making this guide.

<table class="table">
	<thead>
		<tr>
			<th width="25%">HTML</th>
			<th width="25%">CSS</th>
			<th width="25%">JS</th>
			<th width="25%">SCSS</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Lorem ipsum dolor</td>
			<td>Lorem ipsum dolor</td>
			<td>Lorem ipsum dolor</td>
			<td>Lorem ipsum dolor</td>
		</tr>
		<!-- more data rows -->
	</tbody>
</table>
HTML CSS JS SCSS
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor

Responsive Tables

Any table is able to be made responsive by adding the responsiveclass to it. This is true for our tableclass, as well. If you'd like to learn more about our other responsive table classes, see the UI Style Guide.

If your table is nested inside of a grid, and it shares its row at larger screen sizes, then you will want to use the following method. Please note, the following method only works if the tableclass is also present on the table.
<div class="table__wrapper">
	<table class="table">
		<thead>
			<tr>
				<th width="25%">HTML</th>
				<th width="25%">CSS</th>
				<th width="25%">JS</th>
				<th width="25%">SCSS</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Lorem ipsum dolor</td>
				<td>Lorem ipsum dolor</td>
				<td>Lorem ipsum dolor</td>
				<td>Lorem ipsum dolor</td>
			</tr>
			<!-- more data rows -->
		</tbody>
	</table>
</div>
HTML CSS JS SCSS
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor