Add Bootstrap Table Styles to Your Theme

Add Bootstrap Table Styles to Your Theme

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;
}

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>

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.

24 thoughts on “Add Bootstrap Table Styles to Your Theme”

  1. 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 …

      1. 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! 🙂

  2. 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! 🙂

  3. 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?

  4. 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.

Leave a Comment

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

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.