2020 NATIONAL CONVENTION INFO
  • TAKE ACTION
  • BLOG
  • REGISTER TO VOTE
  • FIND YOUR STATE PARTY

Reform PartyReform Party

  • GET INVOLVED
  • OUR SOLUTIONS
  • CONTACTS
  • CONTRIBUTE

Style – Tables

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>
  …
</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>
  …
</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>
  …
</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>
  …
</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>
  …
</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) labelsMust 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>

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • North Carolina Farmland

    Letter from the Chairman of North Carolina to Members: Trump Administration’s Agricultural Policies Are Sowing the Seeds of Ruin

    To the Members of the Reform Party of North Car...
  • Elections Ahead - Run for Office

    2020 Reform Party Presidential Nomination Process Underway

    Candidates seeking all federal, state and local...
  • Out Of Control Spending And Debt From Democrats And Republicans Must Be Stopped

    Key Facts For This Story: The federal governmen...

Ballot Access Drives

Support Candidate Ballot Access

Our candidates need help to get the signatures required to run for office. Click here to join our effort.

Connect On Social Media

Connect with us online

The Reform Party is growing its social media presence everyday through Twitter, Facebook, Instagram and more. Click here to connect with us online.

Upcoming Events

Meet Reformers at local events

The Reform Party is holding activities and events in districts all across the country and online. Click here to see upcoming events.

Our Solutions

Fiscal Responsibility
Taxes
Job Creation
Healthcare
Education
Ethical Government
Environmental Protection
Energy
Transportation and Infrastructure
Foreign Policy
National Security / Defense

Reform Party Resources

Core Principles
National Chairman's Message
Reform Party Store
National Debt Clock
Research and eBooks
Events and Webinars

Take Action

Get Involved
Join the Reform Party
Become A Candidate
Volunteer
Contribute / Donate
Courses / Training

Key Contacts

Reform Party Chairman's Office
National Committee
State Chapter Contacts
Press Relations

Mailing Address

Reform Party of the United States
PO Box 660675 #3995
Dallas, TX 75266-0675

© Copyright 2020 All Rights Reserved - Privacy Policy

By providing your phone number, you are consenting to receive calls and SMS/MMS msgs, including autodialed and automated calls and texts, to that number from the Reform Party National Committee. Msg&data rates may apply.

Paid for by the Reform Party National Committee. Not Authorized By Any Candidate Or Candidate's Committee. www.reformparty.org

TOP