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