Josh Hughes

Have been struggling with this for a while trying to get decent looking tables. Stumbled across a great page on codepen.  I'm using the Copenhagen template and it has come up a treat. 

Check out the codepen link to play around with their easy to use editor.

I followed these steps and used the following code:

1. Edit your theme
2. Select the css tab
3. Search for tables
4. Replace everything in the tables section with:

.wrapper {
margin: 0 auto;
padding: 20px;
max-width: 100%;
}

.table {
margin: 0 0 40px 0;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
display: table;
}
@media screen and (max-width: 580px) {
.table {
display: block;
}
}

.row {
display: table-row;
background: #f6f6f6;
}
.row:nth-of-type(odd) {
background: #e9e9e9;
}
.row.navy {
font-weight: 800;
color: #ffffff;
background: #335394;
}
.row.teal {
font-weight: 800;
color: #ffffff;
background: #6ac2bc;
}
.row.blue {
font-weight: 800;
color: #ffffff;
background: #639cc8;
}
@media screen and (max-width: 580px) {
.row {
padding: 8px 0;
display: block;
}
}

.cell {
padding: 6px 12px;
display: table-cell;
}
@media screen and (max-width: 580px) {
.cell {
padding: 2px 12px;
display: block;
}
}

NB. row.navy, row.blue and row.teal are header rows with bold text, white text colour, and coloured background. Replace the hex colour with your own and rename row.### to whatever suits - it just needs to be the same in the HTML that comes up shortly.

       5. Select Save

       6. Select Publish Changes

       7. Now navigate to and edit your article

       8. Hit the Source Code button 

       9. Copy and paste the following HTML code:

  
  

    
    

      

        Name
      
      

        Age
      
      

        Occupation
      
      

        Location
      
    
    
    

      

        Luke Peters
      
      

        25
      
      

        Freelance Web Developer
      
      

        Brookline, MA
      
    

  

       10. Click OK

NB. It won't look very good in the WYSIWYG editor, just plain text running down the page. Each line is a cell.

The first four lines are the headers (Name, Age, Occupation and Location). The following four lines are the row data. 

       10. Preview should look something like this:

Hope this helps!