Tables
v3.xUse tables to display data you wish to compare and contrast.
/ Bootstrap 3.xTables
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> |