Recent searches


No recent searches

Josh Hughes's Avatar

Josh Hughes

Joined Oct 22, 2021

·

Last activity Oct 22, 2021

Following

0

Followers

0

Total activity

2

Votes

0

Subscription

1

ACTIVITY OVERVIEW

Latest activity by Josh Hughes

Josh Hughes commented,

Community comment Feedback - Help Center (Guide)

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:

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!

View comment · Posted Dec 16, 2016 · Josh Hughes

0

Followers

0

Votes

0

Comments