Find Your Nearest Brakes+ Mechanical Services Store

Store Locator
WE DO CAR BRAKES
More About Brake Services

WE DO CAR BRAKES

Brakes+ Mechanical Services are the brake repair, replacement and service specialists. From brake pads to rotors and drums, as well as brake hydraulics, Brakes+ Mechanical Services know brakes inside and out.

WE DO CAR SERVICING
More About Car Servicing

WE DO CAR SERVICING

Brakes+ Mechanical Services team of qualified mechanics can take care of all your car servicing needs. Our mechanics perform minor and major services and manufacturer's log book servicing on most makes and models.

WE DO MECHANICAL REPAIRS
More About Mechanical Repairs

WE DO MECHANICAL REPAIRS

The Brakes+ Mechanical Services mechanics are experienced in conducting general mechanical repairs including suspension, cooling systems, diagnostics, transmissions and so much more.

BRAKES+ MECHANICAL SERVICES~ WE DO IT ALL!

locate brakes plus store

BRAKES+ MECHANICAL SERVICES~ WE DO IT ALL!

Brakes+ was established in 1990 providing specialist brake services and repairs. Even though we are brake experts our technicians are fully qualified mechanics. That means we have been taking care of all car repairs, servicing and mechanical for over 26 years. We still offer complete autocare including all car servicing, repairs and mechanical as well as our trademark expert brake service and repair. Don't drive all over town - save time and money - call Brakes+ for MECHANICAL SERVICES.

FIND OUT MORE

Table Designs

Category: Site Content
Published: Thursday, 21 March 2013 19:38
Written by Brakes Plus Complete Autocare
Hits: 2775

Default styles

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
  …
</table>

Optional classes

Add any of the following classes to the .table base class.

.table-striped

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped">
  …
</table>

.table-bordered

Add borders and rounded corners to the table.

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered">
  …
</table>

.table-hover

Enable a hover state on table rows within a <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-hover">
  …
</table>

.table-condensed

Makes tables more compact by cutting cell padding in half.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-condensed">
  …
</table>

Optional row classes

Use contextual classes to 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.
# Product Payment Taken Status
1 TB - Monthly 01/04/2012 Approved
2 TB - Monthly 02/04/2012 Declined
3 TB - Monthly 03/04/2012 Pending
4 TB - Monthly 04/04/2012 Call in to confirm 
...
  <tr class="success">
    <td>1</td>
    <td>TB - Monthly</td>
    <td>01/04/2012</td>
    <td>Approved</td>
  </tr>
...

Supported table markup

List of supported table HTML elements and how they should be used.

Tag Description
<table> Wrapping element for displaying data in a tabular format
<thead> Container element for table header rows (<tr>) to label table columns
<tbody> Container element for table rows (<tr>) in the body of the table
<tr> Container element for a set of table cells (<td> or <th>) that appears on a single row
<td> Default table cell
<th> Special table cell for column (or row, depending on scope and placement) labels
Must be used within a <thead>
<caption> Description or summary of what the table holds, especially useful for screen readers 
<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

MECHANICAL SERVICES~ We Do It All...

TOP