Boo Tables more style for table

table .boo-table + bootstrap class

Classes for tables default

Boo extends display the data in the tables combination of other classes aplikovanch the table element or a wrapper table.

class description
.table default table style
.boo-table Styling tables (thead, tfoot, caption, border)
.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-content Style for the table located inside of something (well, widget, wrapper)
.table-light Table without lines and columns. Removes border
.filter Class for column filter to element thead or tfoot. Apli to tr
.column-sorter Add sortable arrow for table. Apli to span in th
.total Line for the total in tfoot
.pagination-btn
.pagination-boo		 pagination style as button bootstrap 
<!-- Boo table -->
<table class="table boo-table">
    ...
</table>

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

<!-- Boo table -->
<table class="table boo-table ...">
    <caption> ... </caption>
    <thead> ... </thead>
    <tfoot> ... </tfoot>
    <tbody> ... </tbody>
</table>
<table class="table boo-table ...">
    <thead> 
        <tr>
            <th class="sorting_asc">ID 
                <span class="column-sorter"></span></th>
            <th class="sorting">Name 
                <span class="column-sorter"></span></th>
            <th class="sorting">City 
                <span class="column-sorter"></span></th>
        </tr>
    </thead>
    <tfoot> 
         <tr class="total ..."> ... </tr>
    </tfoot>
    <tbody> ... </tbody>
</table>

boo table all default class

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-content

table-bordered class can not be combined and table-content

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-light

table-light

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-light table-striped use backround bg-white

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 caption, total

This is the caption for .boo-table .table-content

Boo Table Caption - Title fot table Here text in span
Order ID Customer ID Shipped Date Costs
Total sum 202.46
10248 VINET 8/16/2012 32.38
10249 TOMSP 8/10/2012 11.61
10250 HANAR 8/12/2012 65.83
10251 VICTE 8/15/2012 41.34
10252 SUPRD 8/11/2012 51.3

table add color and base wrap

10248 VINET 8/16/2012 32.38
10249 TOMSP 8/10/2012 11.61
10250 HANAR 8/12/2012 65.83
Order ID Customer ID Shipped Date Costs
10248 VINET 8/16/2012 32.38
10249 TOMSP 8/10/2012 11.61
10250 HANAR 8/12/2012 65.83
Boo Table Caption - Title fot table Here text in span
10248 VINET 8/16/2012 32.38
10249 TOMSP 8/10/2012 11.61
10250 HANAR 8/12/2012 65.83
Boo Table Caption - Title fot table Here text in span
Order ID Customer ID Shipped Date Costs
Total sum 109.82
10248 VINET 8/16/2012 32.38
10249 TOMSP 8/10/2012 11.61
10250 HANAR 8/12/2012 65.83 
<!-- Table wrapp -->
<div class="table-wrapper">
    <table class="table boo-table table-content ....">
        ...
    </table>
</div>

base table in .well-small .well-nice

Default table in well well-small
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
Boo table in well well-small and backgroud
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
Boo table in well-black total
Order ID Customer ID Shipped Date Costs
Total sum 109.82
10248 VINET 8/16/2012 32.38
10249 TOMSP 8/10/2012 11.61
10250 HANAR 8/12/2012 65.83
10248 VINET 8/16/2012 32.38

table in well use navbar

Boo table in well-box

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 in well with navbar

Boo table in well-box

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

Boo color background table

Boo color backgroud Blue
Full Name Phone Action
Jacob Smith jacob.smith@example.com Edit
Isabella Johnson jacob.smith@example.com Edit
Ethan Williams ethan.williams@example.com Edit
Emma Jones emma.jones@example.com Edit
Boo color backgroud Green
Full Name Phone Action
Jacob Smith jacob.smith@example.com Edit
Isabella Johnson jacob.smith@example.com Edit
Ethan Williams ethan.williams@example.com Edit
Emma Jones emma.jones@example.com Edit
Boo color backgroud Yellow
Full Name Phone Action
Jacob Smith jacob.smith@example.com Edit
Isabella Johnson jacob.smith@example.com Edit
Ethan Williams ethan.williams@example.com Edit
Emma Jones emma.jones@example.com Edit

Boo table in well-box

Boo table in well-black with navbar inverse
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

More elements for table

button NEW Contact
More setting for table next elements
ava Full Name Email Status Action
Jacob Smith Curabitur vitae leo justo augue jacob.smith@example.com
Edit user
Isabella Johnson Curabitur vitae leo justo augue jacob.smith@example.com
Edit user
Ethan Williams Curabitur vitae leo justo augue ethan.williams@example.com
2500 / 5000
 Edit user
Emma Jones Curabitur vitae leo justo augue emma.jones@example.com
Edit user
Here info for table
Here use table-light next elements
ava Full Name Email Status Action
Jacob Smith Curabitur vitae leo justo augue jacob.smith@example.com
Completed
 Edit user
Isabella Johnson Curabitur vitae leo justo augue jacob.smith@example.com
Oportunity
 Edit user
Ethan Williams Curabitur vitae leo justo augue ethan.williams@example.com
Prospect
 Edit user
Emma Jones Curabitur vitae leo justo augue emma.jones@example.com
Not
 Edit user

boo table wraped in widget

Widget is used for the DataTable. This is a demo application styles. Functional examples are DataTable page

table in widget .widget-simple

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 in widget .widget-box

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

widget-simple no class widget-table

For header use .header-small
Order ID Customer ID Employee ID Order Date Required Date Shipped Date Costs
Total sum 202.46
10248 VINET Buchanan 8/4/2012 9/1/2012 8/16/2012 32.38
10249 TOMSP Suyama 8/5/2012 9/16/2012 8/10/2012 11.61
10250 HANAR Peacock 8/8/2012 9/5/2012 8/12/2012 65.83
10251 VICTE Leverling 8/8/2012 9/5/2012 8/15/2012 41.34
10252 SUPRD Peacock 8/9/2012 9/6/2012 8/11/2012 51.3

Footer for widget

Basic classes for widgets

class description
.widget boo element
.widget-simple style for widget
.widget-box style for widget
.widget-table style for table in widget
.widget-header heading for widget
.widget-footer footer for widget
.table-tool-wrapper wrap for tool in header (align left or right)
.btn-toolbar bootstrap element - use for bar to ul or div 
<!-- widget-simple -->
<div class="widget widget-simple widget-table">
    <div class="widget-header">
        <h4> ... </h4>
        <div class="table-tool-wrapper">
            <ul class="btn-toolbar pull-right">
                ...
            </ul>
        </div>
    </div>
    <table class="table boo-table table-striped ...">
        ...
    </table>
    <div class="widget-footer">
        <div class="btn-toolbar">
            ...
        </div>
        <div class="pagination pagination-btn pull-right">
            ...
        </div>
    </div>
</div>

<!-- widget-box -->
<div class="widget widget-box widget-table">

Table wraped in widget add color background

Table in widget-box .bg-blue-medium

widget box

Caption - Table Title
Full Name Phone Action
Jacob Smith jacob.smith@example.com Edit
Isabella Johnson jacob.smith@example.com Edit
Ethan Williams ethan.williams@example.com Edit
Emma Jones emma.jones@example.com Edit

widget box

Caption - Table Title
Full Name Phone Action
Jacob Smith jacob.smith@example.com Edit
Isabella Johnson jacob.smith@example.com Edit
Ethan Williams ethan.williams@example.com Edit
Emma Jones emma.jones@example.com Edit

widget box

Caption - Table Title
Full Name Phone Action
Jacob Smith jacob.smith@example.com Edit
Isabella Johnson jacob.smith@example.com Edit
Ethan Williams ethan.williams@example.com Edit
Emma Jones emma.jones@example.com Edit

Table in widget-simple .table-striped .bg-blue-medium

widget simple

Caption - Table Title
Full Name Phone Action
Jacob Smith jacob.smith@example.com Edit
Isabella Johnson jacob.smith@example.com Edit
Ethan Williams ethan.williams@example.com Edit
Emma Jones emma.jones@example.com Edit

widget simple

Caption - Table Title
Full Name Phone Action
Jacob Smith jacob.smith@example.com Edit
Isabella Johnson jacob.smith@example.com Edit
Ethan Williams ethan.williams@example.com Edit
Emma Jones emma.jones@example.com Edit

widget simple

Caption - Table Title
Full Name Phone Action
Jacob Smith jacob.smith@example.com Edit
Isabella Johnson jacob.smith@example.com Edit
Ethan Williams ethan.williams@example.com Edit
Emma Jones emma.jones@example.com Edit

Other variants for well-nice

Default Table Caption - Title for table Here text in span
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
Default Table Caption - Title for table Here text in span
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
Default Table Caption - Title for table Here text in span
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
Default Table Caption - Title for table Here text in span
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

Other variants for well-black

Default Table Caption - Title for table Here text in span
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
Default Table Caption - Title for table Here text in span
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
Default Table Caption - Title for table Here text in span
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
Default Table Caption - Title for table Here text in span
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