Tables are actually not much different in Bootstrap. Their use has declined over the years since they are not used for layout anymore. So, Bootstrap focuses on what they were intended for: displaying tabular data. There is one addition to tables that may blow your mind....
This lesson should be pretty simple. I mean, it's a table. All you need to know is the available options and how to modify them. This example is really a "kitchen sink" table. It applies the table
class, applies borders with table-bordered
, alternates row colors with table-striped
, and applies a hover effect to the rows with table-hover
. I have included the CSS style to customize the hover color since the stock effect uses the same gray as the alt table rows.
# | First | Last | House | Quidditch | Wand | Pet |
---|---|---|---|---|---|---|
1 | Harry | Potter | Gryffindor | Yes | Holly | Owl |
2 | Ron | Weasley | Gryffindor | Yes | Willow | Owl |
3 | Hermione | Granger | Gryffindor | No | Vinewood | Cat |
4 | Neville | Longbottom | Gryffindor | No | Cherry | Toad |
5 | Seamus | Finnigan | Gryffindor | No | Unknown | None |
6 | Dean | Thomas | Gryffindor | No | Unknown | None |
7 | Draco | Malfoy | Slytherin | Yes | Hawthorn | None |
8 | Vincent | Crabbe | Slytherin | Yes | Unknown | None |
9 | Gregory | Goyle | Slytherin | Yes | Unknown | None |
10 | Luna | Lovegood | Ravenclaw | No | Unknown | None |
11 | Cho | Chang | Ravenclaw | Yes | Unknown | None |
12 | Ernie | MacMillan | Hufflepuff | No | Unknown | None |
13 | Hannah | Abbott | Hufflepuff | No | Unknown | None |
<style>
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
background-color: #FF9001;
}
</style>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">House</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Harry</td>
<td>Potter</td>
<td>Gryffindor</td>
</tr>
</tbody>
</table>
This one is a bit underwealming. I thought a "responive table" would scale as the screen shrinks but the way it works is to encapsulate the table in a box that allows the user to scroll around to see the info. It's not a super elegant solution, but it works without messing up the data display, which is a good thing.
# | First | Last | House | Quidditch | Wand | Pet |
---|---|---|---|---|---|---|
1 | Harry | Potter | Gryffindor | Yes | Holly | Owl |
2 | Ron | Weasley | Gryffindor | Yes | Willow | Owl |
3 | Hermione | Granger | Gryffindor | No | Vinewood | Cat |
4 | Neville | Longbottom | Gryffindor | No | Cherry | Toad |
5 | Seamus | Finnigan | Gryffindor | No | Unknown | None |
6 | Dean | Thomas | Gryffindor | No | Unknown | None |
7 | Draco | Malfoy | Slytherin | Yes | Hawthorn | None |
8 | Vincent | Crabbe | Slytherin | Yes | Unknown | None |
9 | Gregory | Goyle | Slytherin | Yes | Unknown | None |
10 | Luna | Lovegood | Ravenclaw | No | Unknown | None |
11 | Cho | Chang | Ravenclaw | Yes | Unknown | None |
12 | Ernie | MacMillan | Hufflepuff | No | Unknown | None |
13 | Hannah | Abbott | Hufflepuff | No | Unknown | None |
making this happen is as easy as surrounding your table with a DIV
set with the class table-responsive
.
<div class="table-responsive">
<table class="table">
...
</table>
</div>
This is the one that is likely to blow your mind. You can easily make it so users can filter a table by keyword. And I do mean easily....
# | First | Last | House | Quidditch | Wand | Pet |
---|---|---|---|---|---|---|
1 | Harry | Potter | Gryffindor | Yes | Holly | Owl |
2 | Ron | Weasley | Gryffindor | Yes | Willow | Owl |
3 | Hermione | Granger | Gryffindor | No | Vinewood | Cat |
4 | Neville | Longbottom | Gryffindor | No | Cherry | Toad |
5 | Seamus | Finnigan | Gryffindor | No | Unknown | None |
6 | Dean | Thomas | Gryffindor | No | Unknown | None |
7 | Draco | Malfoy | Slytherin | Yes | Hawthorn | None |
8 | Vincent | Crabbe | Slytherin | Yes | Unknown | None |
9 | Gregory | Goyle | Slytherin | Yes | Unknown | None |
10 | Luna | Lovegood | Ravenclaw | No | Unknown | None |
11 | Cho | Chang | Ravenclaw | Yes | Unknown | None |
12 | Ernie | MacMillan | Hufflepuff | No | Unknown | None |
13 | Hannah | Abbott | Hufflepuff | No | Unknown | None |
This one is super easy too.
ID
set to "myInput".ID
of "theInfo" on the TBODY
tag.<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#theInfo tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<input class="form-control form-control-lg" id="myInput" type="text" placeholder="Filter...">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">House</th>
</tr>
</thead>
<tbody id="theInfo">
<tr>
<th scope="row">1</th>
<td>Harry</td>
<td>Potter</td>
<td>Gryffindor</td>
</tr>
</tbody>
</table>
That's really all there is to tables. They are coded the same way they always have been. There are a few more examples in the Bootstrap documentation.