Bear Blog table styles

The default Bear Blog theme keeps tables plain, just full width and nothing else. That leaves a lot of room to give them some more character.

This page collects small CSS tweaks and variations for tables. Each one works out of the box, but they're just as much meant as a starting point. Mix and match, tweak the values, or use them to learn more about theme styling.

Last updated 2 hours, 28 minutes ago.

Minimal

Minimal table

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding-block: 0.4em;
    text-align: left;
    border-block-end: 1px solid color-mix(in srgb, var(--text-color), transparent 85%);
}

Bordered

Bordered table

table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid color-mix(in srgb, var(--text-color), transparent 80%);
}

th, td {
    padding: 0.5em 0.7em;
    text-align: left;
    border: 1px solid color-mix(in srgb, var(--text-color), transparent 80%);
}

Striped

Striped table

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 0.5em 0.7em;
    text-align: left;
}

tbody tr:nth-child(odd) {
    background: color-mix(in srgb, var(--text-color), var(--background-color) 96%);
}

Boxed header

Boxed header table

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    padding: 0.6em 0.7em;
    text-align: left;
    font-weight: 700;
    background: color-mix(in srgb, var(--text-color), var(--background-color) 92%);
}

td {
    padding: 0.5em 0.7em;
    text-align: left;
    border-block-end: 1px solid color-mix(in srgb, var(--text-color), transparent 85%);
}

Card

Card table

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: color-mix(in srgb, var(--text-color), var(--background-color) 96%);
    border-radius: 8px;
    overflow: hidden;
}

th, td {
    padding: 0.6em 0.9em;
    text-align: left;
}

th {
    font-weight: 700;
}

td {
    border-block-start: 1px solid color-mix(in srgb, var(--text-color), transparent 88%);
}

Compact

Compact table

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
}

th, td {
    padding-block: 0.25em;
    padding-inline: 0.5em;
    text-align: left;
    border-block-end: 1px solid color-mix(in srgb, var(--text-color), transparent 85%);
}

Bordered with header

Bordered table with colored header background

table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid color-mix(in srgb, var(--text-color), transparent 80%);
}

th, td {
    padding: 0.5em 0.7em;
    text-align: left;
    border: 1px solid color-mix(in srgb, var(--text-color), transparent 80%);
}

th {
    font-weight: 700;
    background: color-mix(in srgb, var(--text-color), var(--background-color) 92%);
}

Bordered, striped, and headed

Bordered striped table with a distinct header background

table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid color-mix(in srgb, var(--text-color), transparent 80%);
}

th, td {
    padding: 0.5em 0.7em;
    text-align: left;
    border: 1px solid color-mix(in srgb, var(--text-color), transparent 75%);
}

th {
    font-weight: 700;
    background: color-mix(in srgb, var(--link-color), var(--background-color) 80%);
}

tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--text-color), var(--background-color) 95%);
}

Want more? Check out the full Bear Blog library.