Carrie Dils

WordPress Developer, Consultant, and Instructor

Add Bootstrap Table Styles to Your Theme

Originally published on by 24 Comments

PinLinkedIn

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.

Reader Interactions

Comments

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

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

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

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

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

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

Leave a Reply

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