Tables simple data dump

Classes for tables default

Default Bootstrap classes for table

class description
.table default table style
.table-striped Adds zebra-striping to any table row within the tbody
.table-bordered Add borders and rounded corners to the table.
.table-hover Enable a hover state on table rows within a tbody
.table-condensed Makes tables more compact by cutting cell padding in half. 
<!-- Table base -->
<table class="table">
    ...
</table>

<!-- Table combine class -->
<table class="table table-striped table-bordered  table-hover table-condensed">
    ...
</table>

table .table

ID Name City Email Date of birth
1 Colin Nixon Long Beach semper@diamSeddiam.edu 02/10/1986
2 Naida Bennett Lockport commodo@conseque.ca 04/21/1959
3 Danielle Myers Bentonville nunc.sed@liberoInteger.ca 12/11/1971
4 Whitney Jones Troy Nunc@sedliberoProin.edu 08/09/1976
5 Marvin Bell Cody aliquet@Craspellentesque.com 10/17/1979

table .table-striped

ID Name City Email Date of birth
1 Colin Nixon Long Beach semper@diamSeddiam.edu 02/10/1986
2 Naida Bennett Lockport commodo@conseque.ca 04/21/1959
3 Danielle Myers Bentonville nunc.sed@liberoInteger.ca 12/11/1971
4 Whitney Jones Troy Nunc@sedliberoProin.edu 08/09/1976
5 Marvin Bell Cody aliquet@Craspellentesque.com 10/17/1979

table .table-bordered

Clik email to open model

ID Name City Email Date of birth Action
1 Colin Nixon Long Beach semper@diamSeddiam.edu 02/10/1986
2 Naida Bennett Lockport commodo@conseque.ca 04/21/1959
3 Danielle Myers Bentonville nunc.sed@liberoInteger.ca 12/11/1971
4 Whitney Jones Troy Nunc@sedliberoProin.edu 08/09/1976
5 Marvin Bell Cody aliquet@Craspellentesque.com 10/17/1979

table rowspan colspan

ID Name City Email Date of birth Action
1 Colin Nixon Long Beach semper@diamSeddiam.edu 02/10/1986
2 Naida Bennett Lockport commodo@conseque.ca 04/21/1959
nunc.sed@liberoInteger.ca
4 Whitney Jones Troy Nunc@sedliberoProin.edu 08/09/1976
5 Marvin Bell - Cody aliquet@Craspellentesque.com 10/17/1979

table .table-condensed .table-hover

Default Table Caption - Title fot table
ID Name Adresse Action
1 Colin Nixon 6890 East Spring Street, Unit 2L Long Beach, California 90815, USA
2 Naida Bennett 597 Washburn St, Lockport, NY 14094, USA
3 Danielle Myers 2679 Magellan Blvd 72712 Bentonville, USA
4 Whitney Jones 4058 Livernois Rd 48098 Troy United States
5 Marvin Bell 456 Yellowstone Avenue, Cody Wy Us 82414, Cody, WY, 82414 USA

table combine all class

Default Table Caption - Title fot table
ID Name City Email Date of birth Action
1 Colin Nixon Long Beach semper@diamSeddiam.edu 02/10/1986
2 Naida Bennett Lockport commodo@conseque.ca 04/21/1959
3 Danielle Myers Bentonville nunc.sed@liberoInteger.ca 12/11/1971
4 Whitney Jones Troy Nunc@sedliberoProin.edu 08/09/1976
5 Marvin Bell Cody aliquet@Craspellentesque.com 10/17/1979

Table color option coloring table

Optional row classes color table rows

class description
.success Indicates a successful or positive action.
.error Indicates a dangerous or potentially negative action.
.warning Indicates a warning that might need attention.
.info Used as an alternative to the default styles. 
<!-- Table base -->
<table class="table">
    <tr class="success"> ... </tr>
</table>

table color row

ID Name City Email Date of birth
1 Colin Nixon Long Beach semper@diamSeddiam.edu 02/10/1986
2 Naida Bennett Lockport commodo@conseque.ca 04/21/1959
3 Danielle Myers Bentonville nunc.sed@liberoInteger.ca 12/11/1971
4 Whitney Jones Troy Nunc@sedliberoProin.edu 08/09/1976
3 Danielle Myers Bentonville nunc.sed@liberoInteger.ca 12/11/1971
4 Whitney Jones Troy Nunc@sedliberoProin.edu 08/09/1976
5 Marvin Bell Cody aliquet@Craspellentesque.com 10/17/1979

Optional background color table

class description
.bg-blue-light Sets the background color.
.bg-green-light Sets the background color.
.bg-yellow-light Sets the background color.
.bg-... Variants -light -medium -strong
.bg-white Sets the background color to white.
.bg-... Variants for white -white25 -white50 -white75 -white 
<!-- Table base -->
<table class="table bg-green-light">
    ...
</table>

<table class="table">
    <tbody class="bg-blue-medium"> ... </tbody>
</table>

table color background

ID Name City Email Date of birth
1 Colin Nixon Long Beach semper@diamSeddiam.edu 02/10/1986
2 Naida Bennett Lockport commodo@conseque.ca 04/21/1959
3 Danielle Myers Bentonville nunc.sed@liberoInteger.ca 12/11/1971
4 Whitney Jones Troy Nunc@sedliberoProin.edu 08/09/1976

Table .table

ID Name City Email Date of birth
1 Colin Nixon Long Beach semper@diamSeddiam.edu 02/10/1986
2 Naida Bennett Lockport commodo@conseque.ca 04/21/1959
3 Danielle Myers Bentonville nunc.sed@liberoInteger.ca 12/11/1971
4 Whitney Jones Troy Nunc@sedliberoProin.edu 08/09/1976

Row link plugin for bootstrap table

This plugin turns a table row into a clickable link.

<!-- Row Link -->
<table data-provides="rowlink">
...
</table>

Add data-provides="rowlink" to a <table>, <tbody> or <tr> element. The value should be selector to the link, which is a child of the row. A cell can be excluded by adding the .nolink class to the <td>.

Click icon detail or table row.

ID Name City Email Date of birth Action
1 Colin Nixon Long Beach semper@diamSeddiam.edu 02/10/1986
2 Naida Bennett Lockport commodo@conseque.ca 04/21/1959
3 Danielle Myers Bentonville nunc.sed@liberoInteger.ca 12/11/1971
4 Whitney Jones Troy Nunc@sedliberoProin.edu 08/09/1976
5 Marvin Bell Cody aliquet@Craspellentesque.com 10/17/1979
ID Name City Email Date of birth Action
No record found