Clean Table Styles for Posts (SCSS)
Gives tables in posts and pages a clean, readable look with a bold header row, light striping, comfortable padding and horizontal scrolling on phones.
Opens WPIDE on
Code
$header-bg: #f0f0f1;
$stripe: rgba(0, 0, 0, 0.03);
$border: rgba(0, 0, 0, 0.12);
.entry-content,
.wp-block-post-content {
table {
width: 100%;
border-collapse: collapse;
font-size: 0.95em;
}
th,
td {
padding: 0.6em 0.9em;
border: 1px solid $border;
text-align: left;
vertical-align: top;
}
thead th,
tr:first-child th {
background: $header-bg;
font-weight: 600;
}
tbody tr:nth-child(even) {
background: $stripe;
}
@media (max-width: 600px) {
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
}Notes
Change $header-bg and $stripe to match your theme.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.