Tables

v3.x

Use tables to display data you wish to compare and contrast.

BBootstrap 3.x / Tables


Table Caption Here
Table summary goes here
Heading 1 Heading 2 Heading 3
content content content
content content content
content content content

<table class="table table-striped">
<caption>
	Table Caption Here
	<br>
	<span class="summary">Table summary goes here</span>
</caption>
<thead>
	<tr>
		<th style="width:20%;">Heading 1</th>
		<th style="width:20%;">Heading 2</th>
		<th style="width:60%;">Heading 3</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>content</td>
		<td>content</td>
		<td>content</td>
	</tr>
	<tr>
		<td>content</td>
		<td>content</td>
		<td>content</td>
	</tr>
	<tr>
		<td>content</td>
		<td>content</td>
		<td>content</td>
	</tr>
</tbody>
</table>
   

Custom CSS

Custom CSS is required for the steps column and for removing borders from tables. Using CSS, I've arbitraily set the background to aliceblue. To create a steps table, set the width of the first <td>element to ~5 - 10%, and choose your own background color.

You may wish to specify specific styling for the <caption> element and .summary class.

View all custom Bootstrapr.io CSS
/* Set styles for the Steps column */
.numbered-steps tr td:first-of-type {
   padding: 3px;
   text-align: center;
   vertical-align: middle;
   font-weight: 600;
   background: aliceblue;
   width: 1.5rem;
   color: #666666;
   font-size: 1.2rem;
}

/* Set the font color to gray */
.gray {
   color: gray;
}

/* Remove all borders from table */
   table.table-borderless tr,
   table.table-borderless th,
   table.table-borderless td {
   border: none !important;
}

/* Arbitrary styling for the caption and summary */
caption {
   font-size: larger;
   text-align: center;
   color: inherit;
}

caption .summary {
   font-size: smaller;
   text-align: center;
   color: gray;
}

Notes

Accent your table rows and cells by adding alternate background colors based on these Bootstrap classes.

grey .active
<tr class="active">content<tr>
blue .info
<tr class="info">content<tr>
green .success
<tr class="success">content<tr>
yellow .warning
<tr class="warning">content<tr>
red .danger
<tr class="danger">content<tr>