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

- Type: SCSS
- Runs: Site-wide header
- Category: [Content](https://wpide.com/library/category/content/)
- Tags: scss, tables, typography
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/content-table-styles-scss/

## Code

```scss
$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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Clean Table Styles for Posts (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/