Recent searches
No recent searches

Josh Hughes
Joined Oct 22, 2021
·
Last activity Oct 22, 2021
Following
0
Followers
0
Total activity
2
Votes
0
Subscription
1
ACTIVITY OVERVIEW
BADGES
ARTICLES
POSTS
COMMUNITY COMMENTS
ARTICLE COMMENTS
ACTIVITY OVERVIEW
Latest activity by Josh Hughes
Josh Hughes commented,
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:
- Edit your theme
- Select the css tab
- Search for tables
- 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:
NameAgeOccupationLocationLuke Peters25Freelance Web DeveloperBrookline, 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