Creating attention-grabbing pricing tables

Let's revisit the mockup of how our client would like the pricing tables to look on desktop-sized screens:

Let's see how close we can get to the desired result, and what we can work out for other viewport sizes.

Setting up the variables, files, and markup

As shown in the preceding screenshot, there are a few tables in this design. We can begin by adjusting a few fundamental variables for all tables. These are found in _variables.less. Search for the tables section and adjust the variables for background, accented rows, and borders as desired. I've made these adjustments as shown in the following lines of code:

// Tables
// -------------------------
...
@table-bg:     transparent; // overall background-color
@table-bg-accent:  hsla(0,0,1%,.1); // for striping
@table-bg-hover:  hsla(0,0,1%,.2);
@table-bg-active:  @table-bg-hover;
@table-border-color:  #ccc; // table and cell border

Save the file, compile it to CSS, and refresh to see the result as shown...