Creating responsive scrollable tables in Divi

By August 11, 2020Blog

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 the HTML and CSS zip file here.

Watch the video

  • Login to your Divi website.
  • Add this CSS code to your style sheet.
  • This can be added to your Child style sheet or in Divi / Theme Customizer / Additional CSS.

CSS Code

/* ###### 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.

HTML Code


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

Leave a Reply