Responsive Table For Divi Builder

Neil Forrester
November 10, 2021

Creating tables in Divi is easy enough but if a table has a few columns it can be tricky to have the columns display well.

In this tutorial I have made an easy fix to display tables that have many columns by allowing the user to scroll the column content while keeping the first column sticky.

Download HTML & CSS zip file here

After download extract the zip file to view HTML & CSS files.

  • Login to your Divi website.
  • Add the CSS code below to your style sheet or to your Child style sheet or in Divi / Theme Customizer / Additional CSS.

/* ###### SCROLLING TABLE STYLE ###### */
table.productinfo {
    background: #fff;
    border: 1px solid #ccc;
    display: table;
}


table.productinfo tr.bg th {
    background: #333;
}
table.productinfo tr.headerrow th {
    background: #000;
}
table.productinfo tr.header th {
    color: #fff;
    min-width: 180px;
    font-size: 14px;
    font-family: 'Roboto Slab',Georgia,"Times New Roman",sans-serif;
    font-weight: bold;
    padding-top: 1%;
    position: sticky;
    left: 0;
    z-index: 0;
    text-align: center;
    border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
    padding-bottom: 1%;
    text-transform: uppercase;
}
table.productinfo tr.header th.firstcol{
	position:sticky;
	left:0;
	z-index:1;
}
table.productinfo tr td {
    text-align: center;
    vertical-align: middle;
    font-family: sans-serif;
    font-size: 14px;
}

/* ALTERNATE ROW COLOUR */
table.productinfo tr:nth-child(even){
	background-color:#efefef;
}
table.productinfo tr:nth-child(odd){
	background-color:#ffffff;
}


.tablewrapper02::-webkit-scrollbar {
  -webkit-appearance: none;
  width:15px;
  background:#efefef;
}

.tablewrapper02::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
/* ###### SCROLLING TABLE STYLE END ###### */
  • Now, create a new page or edit an existing one.
  • Add a row.
  • In the row add a text module.
  • Click the Advanced tab for the text module and add this CSS:
overflow-y: scroll !important;
  • Next click the Content tab and add the following table HTML.

<table width="100%" border="0" cellspacing="0" cellpadding="4" class="productinfo"> <tbody> <tr class="header bg"> <th scope="col" class="firstcol" style="background: #5f626d;">IMG</th> <th scope="col">h1</th> <th scope="col">h2</th> <th scope="col">h3</th> <th scope="col">h4</th> <th scope="col">h5</th> <th scope="col">h6</th> <th scope="col">h7</th> </tr> <tr class="header bg headerrow"> <th scope="row">rh1</th> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> </tr> <tr class="header bg headerrow"> <th scope="row">rh2</th> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> </tr> <tr class="header bg headerrow"> <th scope="row">rh2</th> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> </tr> <tr class="header bg headerrow"> <th scope="row">rh2</th> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> </tr> </tbody> </table>

  • Click the Visual tab to use the WYSIWYG editor.
  • It is possible to add/delete columns and rows using the table tools and easily edit the table cells.
  • Save & close the module.
  • Save and exit the visual builder.

0 Comments

Submit a Comment

Your email address will not be published.

Recent Posts

The Importance Of Professional Website Design

The Importance Of Professional Website Design

You can try to design your company’s website yourself, but the fact is, it just won’t have the same kind of impact. Plus, designing a website can be really time-consuming – time which you’d probably be better off using to run the business and make sales. Professional...

Good Web Design Compliments Digital Marketing

Good Web Design Compliments Digital Marketing

Your website is the main platform your customers get to know about your business. After all, your digital marketing efforts will send prospects to your website – whether it is to find more information about your products/services, make a booking, buy a product or find...

Top Five Tips for a Healthy Work-Life Balance

Top Five Tips for a Healthy Work-Life Balance

Achieving work-life balance is an art that needs mastery, just like music, dance and painting. Work-life balance may seem like impossible to achieve, especially in the current circumstances. The world is not the same since the coronavirus pandemic broke in. Many...

Google Ads Agency Geelong

Google Ads Agency Geelong

Digital online advertising is a vital part of any online marketing strategy. Key among the advertising services available to marketers is Google Ads, which allows marketers to leverage Google’s insanely massive reach of about 5-billion searches per day. Here are some...

Do I Need Cyber Insurance?

Do I Need Cyber Insurance?

What is cyber protection? Cyber insurance is a relatively new form of cover. It’s designed to help protect your business from the financial impact of computer hacking or a data breach.If you see it, report it! In February 2017, the Senate passed the Privacy Amendment...

Pin It on Pinterest

Share This