Markdown Table Styling: Borders, Colors and Width

Can you style a Markdown table?

A pipe table is only data. The Markdown table syntax gives you a header row, rows and per-column alignment, and the renderer turns that into an HTML <table>. Everything visual, including lines, shading, padding and width, comes from the stylesheet of wherever the page is shown.

| Service  | Status   | Uptime |
| :------- | :------- | -----: |
| API      | Healthy  | 99.98% |
| Web      | Healthy  | 99.95% |
| Database | Degraded | 98.20% |

So the question is always “whose CSS?” If it's yours (a docs site, a blog, your Obsidian vault), add a rule. If it's GitHub's, GitLab's or Reddit's, the table look is fixed, and you can only change what is in the cells.

Why Markdown table borders aren’t showing

If a table appears as rows and columns of text but without lines, the Markdown is correct. The cause is almost always one of these:

• The theme draws no borders. Browsers render a bare <table> without lines, and some blog and docs themes leave it that way.
• A CSS reset removed them. Tailwind's preflight, for example, strips default table borders and spacing. The typography plugin's prose class restores readable table styles.
• Your selector loses to the theme. A rule like table td can be overridden by a more specific theme selector. Inspect the cell in your browser's dev tools and match its specificity.
• The preview is a different app. An editor preview, a static site and GitHub can show one file three ways.

If the table shows literal pipes instead, that is a syntax problem; see Markdown table not rendering.

Every way to style a table, and where it works

CSS recipes: borders, header color, striped rows, full width

These rules work in any stylesheet you control. Start with the first block and trim.

table {
  border-collapse: collapse;   /* one line between cells, not a double border */
  width: 100%;                 /* full width */
}
th, td {
  border: 1px solid #d0d7de;   /* the borders */
  padding: 6px 12px;
}
thead th {
  background: #f6f8fa;         /* header background */
}
tbody tr:nth-child(even) {
  background: #f6f8fa;         /* striped rows */
}

For a table without lines, which is the usual answer to “markdown table without borders”, remove them in the same way. Keep a single rule under the header so the columns stay readable.

table, th, td {
  border: 0;                   /* no lines at all */
}
th {
  border-bottom: 2px solid currentColor;  /* keep only a rule under the header */
}

Markdown has no way to color a single row. In CSS, pick rows by position. You will have to update the selector when rows move, so prefer a status column with emoji when the color carries meaning.

/* Color the third body row (Markdown has no per-row color) */
tbody tr:nth-child(3) { background: #fff4ce; }

/* Highlight the row under the pointer */
tbody tr:hover { background: #eef6ff; }

Where to put the CSS: MkDocs, Docusaurus, Jekyll, Hugo and more

MkDocs

Register a stylesheet under extra_css. The Material theme styles tables through .md-typeset table:not([class]); inspect your own build to confirm the selector for your version. To style one table, wrap it in a div with a class using the md_in_html extension.

# mkdocs.yml
extra_css:
  - stylesheets/extra.css      # file: docs/stylesheets/extra.css

# extra.css (Material for MkDocs styles tables through this selector)
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  border: 1px solid var(--md-default-fg-color--lightest);
}

<!-- needs "md_in_html" under markdown_extensions in mkdocs.yml -->
<!-- then style ".striped table" in extra.css -->
<div class="striped" markdown>

| Service | Status  |
| ------- | ------- |
| API     | Healthy |

</div>

Docusaurus

Put overrides in src/css/custom.css. Docusaurus styles tables through its Infima framework, which exposes table variables; check the Infima documentation for the names in your version.

/* src/css/custom.css */
:root {
  --ifm-table-border-color: #d0d7de;
  --ifm-table-head-background: #f6f8fa;
  --ifm-table-stripe-background: #f6f8fa;
  --ifm-table-cell-padding: 8px 14px;
}

Jekyll and GitHub Pages

GitHub Pages renders with kramdown, which lets you attach a class to a table with an inline attribute list on the line right after it. Then style that class in your theme's CSS. This is Jekyll, not github.com: a README on GitHub ignores it.

| Service | Status  |
| ------- | ------- |
| API     | Healthy |
{: .striped }

/* assets/css/style.scss or your theme's stylesheet */
table.striped tbody tr:nth-child(even) { background: #f6f8fa; }

Hugo

Style the rendered table in your theme's CSS, for example under the content container. For a class on individual tables, Goldmark supports attributes on some blocks and recent Hugo versions add a table render hook; as of October 2026 the Hugo docs are the place to check which your version supports.

Obsidian

/* <vault>/.obsidian/snippets/tables.css — enable in Settings > Appearance > CSS snippets */
.markdown-rendered table th,
.markdown-rendered table td {
  border: 1px solid var(--background-modifier-border);
}
/* Per note: add  cssclasses: [striped]  to the note's properties */
.striped table tbody tr:nth-child(even) { background: var(--background-secondary); }

Selectors differ between themes and between Reading view and the editor; inspect an element with the developer tools (Ctrl+Shift+I, or Cmd+Option+I on macOS) before you rely on one.

VS Code preview

// settings.json
"markdown.styles": ["styles/tables.css"]

Jupyter

Run this in a notebook cell to restyle tables in that notebook session. It affects the notebook interface, not the GitHub view of the file.

from IPython.display import HTML

HTML("""<style>
.jp-RenderedHTMLCommon table, .rendered_html table { border-collapse: collapse; }
.jp-RenderedHTMLCommon th, .jp-RenderedHTMLCommon td,
.rendered_html th, .rendered_html td { border: 1px solid #ccc; }
</style>""")

Pandoc, Quarto and LaTeX

# HTML: your own stylesheet
pandoc report.md -s -o report.html --css=tables.css

# Word: edit the "Table" style in a reference document
pandoc report.md -o report.docx --reference-doc=custom-reference.docx

Pandoc's LaTeX writer builds on longtable and booktabs: it draws rules above, below and under the header, and no vertical lines. For a full grid or colored rows in PDF, use a Lua filter or a raw LaTeX table. See the Pandoc tables guide.

Inline styles in an HTML table

Where the renderer allows raw HTML and keeps style attributes, write the table in HTML. Convert an existing pipe table with Markdown table to HTML, then add styles.

<table style="width:100%; border-collapse:collapse;">
  <thead>
    <tr style="background:#f6f8fa;">
      <th style="border:1px solid #d0d7de; padding:6px 12px; text-align:left;">Service</th>
      <th style="border:1px solid #d0d7de; padding:6px 12px; text-align:left;">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border:1px solid #d0d7de; padding:6px 12px;">API</td>
      <td style="border:1px solid #d0d7de; padding:6px 12px; background:#dafbe1;">Healthy</td>
    </tr>
  </tbody>
</table>

That works in VS Code's preview and in generators such as MkDocs and Jekyll. Hugo needs unsafe enabled. Docusaurus and other MDX sites parse HTML as JSX, where style is an object:

{/* Docusaurus and other MDX sites: style is an object, not a string */}
<td style={{ background: '#dafbe1', textAlign: 'center' }}>Healthy</td>

Inline styles cost readability and repeat on every cell. If you control the site, one CSS rule is easier to maintain.

What you can change on GitHub

GitHub draws README and issue tables with its own borders, header weight and alternating row shading. It strips style attributes and <font>, so HTML colors, borders and widths don't survive. What you can still do in the cell content:

• Align columns with colons in the delimiter row. See alignment.
• Mark status with colored emoji, which render in every cell.
• Format text with bold, code, <kbd>, sub and superscript. See text formatting and color.
• Widen a column with a spacer; see column width.

| Service  | Status        | Uptime |
| :------- | :------------ | -----: |
| API      | 🟢 Healthy    | 99.98% |
| Web      | 🟢 Healthy    | 99.95% |
| Database | 🔴 Degraded   | 98.20% |
| Cache    | 🟡 Maintenance | 99.10% |

| Name             | Description |
| :----------------------------------------------- | :---------- |
| Ada                                              | Engineer    |

Table styling by platform

Common mistakes (broken vs. fixed)

Inline styles on GitHub

<table style="width:100%; border:2px solid red">
  <tr style="background:#fff4ce"><th>Service</th><th>Status</th></tr>
  <tr><td>API</td><td style="color:green">Healthy</td></tr>
</table>

The table still renders, but with GitHub's default look. There is no fix inside GitHub. Use emoji for color, or host the page somewhere you control the CSS, such as GitHub Pages.

A style string in MDX

<td style="background: #dafbe1">Healthy</td>

MDX parses the cell as JSX and fails the build on a string style. Use style={{ background: "#dafbe1" }}, or move the rule into custom.css.

Borders removed by a CSS reset

Tables look borderless after adding Tailwind or a normalize layer. Add the typography plugin's prose class to the content wrapper, or write explicit th, td border rules like the ones above.

Spaces for layout

Padding cells with spaces changes only the source, not the output. Alignment colons and CSS change the output.

When to use something other than CSS

• You need exact colors in a README. Export the table as an image with Markdown table to image. The text is no longer searchable or accessible, so add the data as a collapsed table too.
• You need a polished page. Publish with a docs generator and own the CSS.
• You need merged or spanning cells. That is HTML, not CSS: see merged cells.
• You need a PDF or Word table. Style it in the target format: LaTeX, a Word reference document or print CSS.

Frequently asked questions