v3.x | Tables

# Rows

# Columns

Borders

Header Row

Variable Widths

Striped

Hover

Condensed

Responsive

Steps Column

Caption

Summary

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>