Learn 'Mobile First' Web Design Using Bootstrap 3 by Rahul A. Sakla - HTML preview

PLEASE NOTE: This is an HTML preview only and some elements such as links or page numbers may be incorrect.
Download the book in PDF, ePub, Kindle for a complete version.

Chapter 4 Bootstrap Tables

4.1 Default Table

For basic styling-light padding and only horizontal dividers-add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, bootstrap opted to isolate our custom table styles.

img58.png

 

img59.png

 

4.2 Striped Rows

 

Use .table-striped to add zebra-striping to any table row within the <tbody>.

 

img4.png  Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.

 

img60.png

 

img61.png

 

4.3 Bordered Table

 

Add .table-bordered for borders on all sides of the table and cells.

img62.png

 

img63.png

 

4.4 Hover Rows

Add .table-hove to enable a hover state on table rows within a <tbody>.

img4.png  This effect will be displayed on browser only.

 

img64.png

 

img65.png