@@include('header.htm', { "title": "Table - Sleek Admin Dashboard Template", "vector_map": "", "date_range_picker": "", "select2": "", "ladda": "", "toastr": "", "flag_icon": "", "full_calendar_core": "", "full_calendar_daygrid": "", "data_table": "", "responsive_data_table": "", "expendable_data_table": "" }) @@include('sidebar.htm', { "parent": "tables", "sub_parent": "tables", "active": "basic-tables" }) @@include('top-bar.htm')
Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap more details.
# | First | Last | Handle |
---|---|---|---|
1 | Lucia | Christ | @Lucia |
2 | Catrin | Seidl | @catrin |
3 | Lilli | Kirsh | @lilli |
4 | Else | Voigt | @voigt |
5 | Ursel | Harms | @ursel |
6 | Anke | Sauter | @Anke |
Use .table-striped
to add zebra-striping to any table row within the <tbody>. Read bootstrap documentation for more details.
# | First | Last | Handle |
---|---|---|---|
1 | Lucia | Christ | @Lucia |
2 | Catrin | Seidl | @catrin |
3 | Lilli | Kirsh | @lilli |
4 | Else | Voigt | @voigt |
5 | Ursel | Harms | @ursel |
6 | Anke | Sauter | @Anke |
Add .table-bordered
for borders on all sides of the table and cells. Read bootstrap documentation for more details.
# | First | Last | Handle |
---|---|---|---|
1 | Lucia | Christ | @Lucia |
2 | Catrin | Seidl | @catrin |
3 | Lilli | Kirsh | @lilli |
4 | Else | Voigt | @voigt |
5 | Ursel | Harms | @ursel |
6 | Anke | Sauter | @Anke |
Add .table-borderless
for borders on all sides of the table and cells. Read bootstrap documentation for more details.
# | First | Last | Handle |
---|---|---|---|
1 | Lucia | Christ | @Lucia |
2 | Catrin | Seidl | @catrin |
3 | Lilli | Kirsh | @lilli |
4 | Else | Voigt | @voigt |
5 | Ursel | Harms | @ursel |
6 | Anke | Sauter | @Anke |
Add .table-hover
for borders on all sides of the table and cells. Read bootstrap documentation for more details.
# | First | Last | Handle |
---|---|---|---|
1 | Lucia | Christ | @Lucia |
2 | Catrin | Seidl | @catrin |
3 | Lilli | Kirsh | @lilli |
4 | Else | Voigt | @voigt |
5 | Ursel | Harms | @ursel |
6 | Anke | Sauter | @Anke |
Use contextual classes to color table rows or individual cells. Read bootstrap documentation for more details.
# | First | Last | Handle |
---|---|---|---|
1 | Lucia | Christ | @Lucia |
2 | Catrin | Seidl | @catrin |
3 | Lilli | Kirsh | @lilli |
4 | Else | Voigt | @voigt |
5 | Ursel | Harms | @ursel |
6 | Anke | Sauter | @Anke |
You can also invert the colors—with light text on dark backgrounds—with .table-dark
. Read bootstrap documentation for more details.
# | First | Last | Handle |
---|---|---|---|
1 | Lucia | Christ | @Lucia |
2 | Catrin | Seidl | @catrin |
3 | Lilli | Kirsh | @lilli |
4 | Else | Voigt | @voigt |
5 | Ursel | Harms | @ursel |
6 | Anke | Sauter | @Anke |
Similar to tables and dark tables, use the modifier classes .thead-dark
or .thead-light
to make <thead>s appear light or dark gray. Read bootstrap documentation for more details.
# | First | Last | Handle |
---|---|---|---|
1 | Lucia | Christ | @Lucia |
2 | Catrin | Seidl | @catrin |
# | First | Last | Handle |
---|---|---|---|
1 | Lucia | Christ | @Lucia |
2 | Catrin | Seidl | @catrin |