• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Carrie Dils

Carrie Dils

WordPress Developer, Consultant, and Instructor

  • About
    • Work with Me
    • Around the Web
    • Media Kit
  • Blog
  • Podcast
  • Web Development Courses
  • Freelancing Courses

Add Bootstrap Table Styles to Your Theme

Originally published on October 1, 2013 by Carrie Dils 24 Comments
Last updated on May 9, 2017

FacebookTweetPinLinkedIn

Confession: Since I started learning CSS and better understanding what it means to properly style content, I’ve left HTML tables in the dust. They’re clunky reminders of my early web design days and signify everything that was wrong and ugly about my markup (i.e. using tables to force layout).

I Use Tables to Display DataBut the truth is, tables aren’t bad. I just misused them. HTML tables are meant to display data — go ahead and think spreadsheet — and are actually darn good at their job.

In this WordPress tutorial, I’ll show you how to add Bootstrap table styles to your site. When we’re done, we’ll have table styles for the following:

  • Plain ole table
  • Basic styled table
  • Condensed table
  • Bordered table
  • Striped table
  • Row hover table (my fave!)

Here’s a preview of the finished product.

Step 1: Add the CSS (or Sass)

I grabbed the table styles I wanted from the Bootstrap Github repository. Add the following CSS to your site’s style sheet.

/* Pulled from https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L2079-L2241 */
.table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
}
.table th,
.table td {
padding: 0.75rem;
vertical-align: top;
border-top: 1px solid #eceeef;
}
.table thead th {
vertical-align: bottom;
border-bottom: 2px solid #eceeef;
}
.table tbody + tbody {
border-top: 2px solid #eceeef;
}
.table .table {
background-color: #fff;
}
.table-sm th,
.table-sm td {
padding: 0.3rem;
}
.table-bordered {
border: 1px solid #eceeef;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #eceeef;
}
.table-bordered thead th,
.table-bordered thead td {
border-bottom-width: 2px;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.05);
}
.table-hover tbody tr:hover {
background-color: rgba(0, 0, 0, 0.075);
}
.table-active,
.table-active > th,
.table-active > td {
background-color: rgba(0, 0, 0, 0.075);
}
.table-hover .table-active:hover {
background-color: rgba(0, 0, 0, 0.075);
}
.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
background-color: rgba(0, 0, 0, 0.075);
}
.table-success,
.table-success > th,
.table-success > td {
background-color: #dff0d8;
}
.table-hover .table-success:hover {
background-color: #d0e9c6;
}
.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
background-color: #d0e9c6;
}
.table-info,
.table-info > th,
.table-info > td {
background-color: #d9edf7;
}
.table-hover .table-info:hover {
background-color: #c4e3f3;
}
.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
background-color: #c4e3f3;
}
.table-warning,
.table-warning > th,
.table-warning > td {
background-color: #fcf8e3;
}
.table-hover .table-warning:hover {
background-color: #faf2cc;
}
.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
background-color: #faf2cc;
}
.table-danger,
.table-danger > th,
.table-danger > td {
background-color: #f2dede;
}
.table-hover .table-danger:hover {
background-color: #ebcccc;
}
.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
background-color: #ebcccc;
}
.thead-inverse th {
color: #fff;
background-color: #292b2c;
}
.thead-default th {
color: #464a4c;
background-color: #eceeef;
}
.table-inverse {
color: #fff;
background-color: #292b2c;
}
.table-inverse th,
.table-inverse td,
.table-inverse thead th {
border-color: #fff;
}
.table-inverse.table-bordered {
border: 0;
}
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.table-responsive.table-bordered {
border: 0;
}
view raw table-styles.css hosted with ❤ by GitHub

Sass users

If you’re using Sass, there’s a .scss partial for tables you could also use instead of the code snippet above. If you go that route, beware the variables and mixins called from the tables partial. You’ll want to chase those down and reference them in your stylesheet, too.  If you have no idea what I’m talking about and want to learn more, here’s an introduction to Sass.

Step 2: Create Tables

Before we get to styling, indulge me a moment to talk about proper semantic markup for tables. This is important if you want your styles to work properly!

<!--
<thead> Groups the header content in a table
<th> Defines a header cell in a table
<tbody> Groups the body content in a table
<td> Defines a cell in a table
-->
<table>
<thead>
<tr>
<th>Column Header #1</th>
<th>Column Header #2</th>
</tr>
</thead>
<tbody>
<tr>
<th>Row Header</th>
<td>I'm in a cell</td>
</tr>
</tbody>
</table>
view raw proper-table-markup.html hosted with ❤ by GitHub

Now, there’s no CSS markup in that code example but look closely at the table layout. Our column headers are grouped within thead tags and are marked up with th.

In my old lazy table usage days, I used table rows/columns with reckless abandon and didn’t properly define table headings.

So, create your tables properly and then we’re ready to add style!

The great Gary Jones, defender of semantic markup and champion of code standards, is the one who knocked this bit about tables into my head. He also convinced me to add Bootstrap table styles to my WordPress theme. So, if you’re learning something useful about tables and styles today, thank Gary. 🙂

Step 3: Add Table Styles

It’s all downhill from here. Below are the CSS classes you’ll add to your <table> tags.

Plain ole table

You don’t need to add any styles. How boring.

Basic styled table

<table class="table">

Condensed table

<table class="table table-sm">

Bordered table

<table class="table table-bordered">

Striped table

<table class="table table-striped">

Row hover table

<table class="table table-hover">

That’s it! You might have hoped it was harder, but it’s not. Super easy to spice up your data tables. To see all the tables in action, you can visit this Bootstrap tables demo.

Interested in learning more about CSS Grids and Frameworks?

If you’re new to Bootstrap or possibly considering Foundation or another CSS framework, it’s hard to wade through all the information “out there” and know which one is best for your web project.

Let me help! I created a course called CSS Grids and Frameworks specifically to help you understand the landscape of available frameworks and when you might choose one over another.

FacebookTweetPinLinkedIn

Filed Under: Front-End Development, WordPress Tutorials

About Carrie Dils

I believe you can make a good living doing work that makes you excited to get out of bed every morning.

In addition to this blog, I host a podcast for freelancers, teach business courses at The Fearless Freelancer®, and teach WordPress and Front-end Development courses for Lynda.com and LinkedIN Learning. I'm also writing a book for freelancers.

Reader Interactions

Comments

  1. Robin Cornett says

    October 1, 2013 at 9:54 am

    Excellent! Glad that tables are making a bit of a comeback. Sometimes there isn’t a better option for how to display the data. Thanks for the tutorial, Carrie!

    Reply
    • Carrie Dils says

      October 1, 2013 at 11:03 am

      You betcha! Forgot to mention you can mix and match those table styles (i.e. table borders and row hovers) however you’d like. 🙂

      Reply
  2. andym says

    October 2, 2013 at 4:11 am

    Love this Carrie, definitely something I’m going to implement in future sites. Tables aren’t the best of HTML, but sometimes you just need to have ordered data…

    Question: do you know of a plugin that allows for users to create tables in WordPress using the TinyMCE editor? Many of my clients would be horrified to go anywhere near the Text editor and its confusing …

    Reply
    • carrie says

      October 2, 2013 at 7:56 am

      I don’t know if that plugin exists, but I’d love if it did!

      Reply
      • Todd E. Jones (@tejones) says

        October 2, 2013 at 10:01 am

        Tiny MCE Advanced, http://wordpress.org/plugins/tinymce-advanced/, will have a table function. It probably isn’t based on Bootrsrap, but it is serviceable. I have used it for a client.

        My question Carrie, is it better just to add the Bootstrap CSS or to use a Boostrap plugin like WordPress Twitter Bootstrap CSS? I would think it is best to use the direct CSS, but the plugin could make for a good, non techy measure. What do you think?

        You are right, tables definitely have their place! 🙂

        Reply
  3. Bill Scheider says

    October 3, 2013 at 12:23 am

    Thanks for this Carrie. I used one of these just today on a client’s site, so ther reminder that I could use a table for data came just in time! 🙂

    Reply
  4. Elissa Hackerson says

    October 17, 2013 at 4:31 pm

    Thanks Carrie for this post (and really, all of your post). This is so timely and useful – using tabled information on a client’s real estate site today.

    Reply
  5. Shanna says

    October 20, 2013 at 7:03 am

    Oh Wow… Haven’t used tables in so long I will have to learn the markup all over! I’ll have to give it a try. Thanks Carrie.

    Reply
  6. rynoesco says

    January 14, 2014 at 2:09 pm

    Thank you very much for the info. After following this, I found that my links are not clickable in Safari and Chrome but they are working in Firefox. Is there something that I might be doing wrong?

    Reply
  7. rynoesco says

    January 14, 2014 at 3:31 pm

    I’ve found that my links only work when I resize my browser down to the mobile width size.

    Reply
    • Carrie Dils says

      January 15, 2014 at 8:46 am

      Are you talking about regular links? In the context of Bootstrap tables? I’m confused.

      Reply
  8. Ryan Escobar says

    January 15, 2014 at 11:01 am

    Yes. Regular links within the table are not clickable in safari or chrome but they are clickable in Firefox. I’m still not able to figure out why.

    Reply
    • Carrie Dils says

      January 15, 2014 at 2:58 pm

      Hmm… My first thought is there might be an unclosed tag or some other parse error that safari/chrome aren’t forgiving, but firefox is. Try running it through a validator like http://validator.w3.org.

      Reply
  9. Cath says

    February 9, 2014 at 1:31 am

    Thanks again Carrie, just what I needed.

    Reply
  10. Cara Linda MS says

    March 26, 2014 at 8:24 am

    Thanks Carrie, Now I can create a table with a variety of styles
    Previously I was using tablepress plugin but I do not really like it because of the limitations of style

    Reply
  11. Elise McCabe (@AmalaCreative) says

    July 8, 2014 at 3:54 pm

    Thanks for the fancy table tut. I used this on a responsive site I built recently & found out it doesn’t fair so well on mobile devices. Any advice on making it look awesome on a variety of screen widths?

    btw…you’re right…eCommerce=no fun.

    Reply
  12. Dorian Speed says

    July 22, 2014 at 5:55 pm

    Just leaving a comment to say I refer to this at least once a month. Great tutorial!

    Reply
    • Carrie Dils says

      July 23, 2014 at 7:39 am

      Dorian, always glad to see you around these parts. Also, I regularly refer to your Gravity Forms / MailChimp post. 🙂

      Reply
  13. Tom A says

    March 4, 2015 at 1:26 pm

    Carrie. Thanks for this tutorial. I’ve almost got it. but having an issue. How do you define width of columns. Within I am using only for two columns. But the first column ends up being about 80% of the width. Is there a way to make the left column only 60%? Let me know if you can. And once again, thanks for all the great stuff you put out.

    Reply
  14. Divakara Ganesh says

    March 25, 2015 at 10:56 am

    Hai Carrie Dils..
    Thanks for Great tutorial.. gt Exactly what i needed..

    Reply
  15. Mickael says

    August 12, 2015 at 1:42 pm

    Great post Carrie. Implemented it right away on my site.

    Reply
  16. effektived says

    October 17, 2015 at 6:49 am

    Thanks so much ;]

    Reply
  17. Alvina Atmadja says

    October 17, 2016 at 3:45 am

    Hi Carrie!

    I just want to say thanks for this tutorial. Been trying to develop using Genesis, and you’ve been such a lifesaver <3

    Reply
  18. Lisa Clark says

    October 8, 2019 at 11:28 pm

    Yes. Regular links within the table are not clickable in safari or chrome but they are clickable in Firefox. I’m still not able to figure out why.

    Reply

Leave a Reply Cancel reply

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

Primary Sidebar

Search

Articles

  • Business
  • Front-End Development
  • Genesis Framework
  • Mental Health
  • Web Accessibility
  • WordPress Tutorials

Looking for recommendations?

My Tech Toolbox

Favorite Business Books

  • OfficeHours.FM
  • My Courses on LinkedIN Learning
  • The Fearless Freelancer®

© 2019 CWD Holdings LLC