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. Required fields are marked *

Recent Posts