How can I format all of my tables the same way with CSS?

Context

The tables in your articles don't look consistent. Some have borders and others don't, fonts and font sizes differ, header rows aren't styled, or wide tables run off the edge of the page. This is common when tables are created in the article editor, imported from another tool, or copied and pasted from Word, Excel, or Google Docs, because pasted tables bring their own fonts, colors, and column widths with them.

You want every table in your knowledge base to use the same header, cell background colors, font colors, and font sizes. You can set this once in your Custom CSS and it applies to every article. This feature is available on select plans.

Resolution

Add the table CSS

1. Go to Customize > Style (HTML & CSS).
2. In the Customize HTML, CSS, and JS section, select Custom CSS.
3. Scroll to the bottom of your Custom CSS and paste in the CSS below. Adding it at the bottom lets it take priority over earlier rules.

   /* ===== Default table styles ===== */
   .hg-article-body {
     --table-border-color: #d0d7de;
     --table-header-bg: #1f4e79;
     --table-header-color: #ffffff;
     --table-stripe-bg: #f4f7fa;
     --table-cell-padding: 8px 12px;
     --table-font-size: 15px;
   }
   
   .hg-article-body table:not(.plain-table) {
     width: 100%;
     max-width: 100%;
     margin: 1em 0;
     border-collapse: collapse;
     border: 1px solid var(--table-border-color);
     font-size: var(--table-font-size);
   }
   
   /* Cells */
   .hg-article-body table:not(.plain-table) > :is(thead, tbody, tfoot) > tr > :is(th, td) {
     padding: var(--table-cell-padding);
     border: 1px solid var(--table-border-color);
     vertical-align: top;
     text-align: left;
     line-height: 1.4;
   }
   
   /* Header cells */
   .hg-article-body table:not(.plain-table) > :is(thead, tbody, tfoot) > tr > th {
     background-color: var(--table-header-bg);
     color: var(--table-header-color);
     font-weight: 600;
   }
   
   /* Alternating row colors */
   .hg-article-body table:not(.plain-table) > tbody > tr:nth-child(even) > td {
     background-color: var(--table-stripe-bg);
   }
   
   /* Remove extra space around paragraphs inside cells */
   .hg-article-body table:not(.plain-table) :is(th, td) > p {
     margin: 0 0 0.5em;
   }
   .hg-article-body table:not(.plain-table) :is(th, td) > p:last-child {
     margin-bottom: 0;
   }
   
   /* ===== Tables pasted from Word, Excel, or Google Docs ===== */
   /* Replace the fixed widths, fonts, and colors that come along with pasted tables.
      This also overrides colors you applied on purpose. Delete the color lines
      if you want to keep highlighted cells. */
   .hg-article-body table:not(.plain-table)[style],
   .hg-article-body table:not(.plain-table)[width] {
     width: 100% !important;
     height: auto !important;
   }
   .hg-article-body table:not(.plain-table) col {
     width: auto !important;
   }
   .hg-article-body table:not(.plain-table) :is(th, td)[style],
   .hg-article-body table:not(.plain-table) :is(th, td)[width],
   .hg-article-body table:not(.plain-table) :is(th, td) :is(p, span, div, font)[style] {
     width: auto !important;
     height: auto !important;
     font-family: inherit !important;
     font-size: inherit !important;
     line-height: inherit !important;
   }
   .hg-article-body table:not(.plain-table) td[style],
   .hg-article-body table:not(.plain-table) td :is(p, span, div, font)[style] {
     color: inherit !important;
     background-color: transparent !important;
   }
   .hg-article-body table:not(.plain-table) > tbody > tr:nth-child(even) > td[style] {
     background-color: var(--table-stripe-bg) !important;
   }
   .hg-article-body table:not(.plain-table) th[style],
   .hg-article-body table:not(.plain-table) th :is(p, span, div, font)[style] {
     color: var(--table-header-color) !important;
     background-color: var(--table-header-bg) !important;
   }

4. Change the colors, font size, and spacing in the lines that start with --table- at the top. Refer to Change how your tables look for what each setting does.
5. Select Update Preview and look at an article that has a table.
6. Save your changes.

This CSS styles every table in your articles, including tables pasted from other tools. The last section of the CSS replaces fixed widths, fonts, and colors that pasted tables bring with them. It also replaces colors you applied to cells on purpose, so delete the lines that set color and background-color in that section if you want to keep highlighted cells.

Change how your tables look

Edit the CSS you pasted in to change these table settings:

Leave a table unstyled

The CSS skips any table that has the class plain-table. Use this for tables you use for layout, such as placing images side by side. Open the article's code view and add the class to the table tag, like <table class="plain-table">. If the table already has a class, add plain-table to the list.

Make wide tables scroll

By default, a table with many columns can run past the edge of your article. To make it scroll sideways instead, add this CSS below the table CSS. With this CSS, tables are only as wide as their content, up to the width of the article.

/* ===== Option: wide tables scroll sideways instead of running off the page ===== */
/* Tables only grow as wide as their content, up to the width of the article. */
.hg-article-body table:not(.plain-table) {
  display: block;
  width: max-content !important;
  max-width: 100%;
  overflow-x: auto;
  border: 0 !important;
}

Style the first row as a header

Tables pasted from Word or Excel often don't have header cells, so the first row looks like any other row. Add this CSS to style the first row of those tables as a header. It uses :has(), which current versions of Chrome, Edge, Firefox, and Safari support.

/* ===== Option: style the first row as the header when a table has no header cells ===== */
.hg-article-body table:not(.plain-table):not(:has(th)) > tbody > tr:first-child > td {
  background-color: var(--table-header-bg) !important;
  color: var(--table-header-color) !important;
  font-weight: 600;
}
.hg-article-body table:not(.plain-table):not(:has(th)) > tbody > tr:first-child > td * {
  color: var(--table-header-color) !important;
}

Keep the first column in view

If you use the scrolling CSS above, you can keep the first column in place while readers scroll sideways. Add this CSS below the scrolling CSS.

/* ===== Option: keep the first column in view when a wide table scrolls (use with the scrolling option) ===== */
.hg-article-body table:not(.plain-table) > :is(thead, tbody) > tr > :is(th, td):first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}
.hg-article-body table:not(.plain-table) > tbody > tr > td:first-child {
  background-color: #ffffff !important;
}
.hg-article-body table:not(.plain-table) > tbody > tr:nth-child(even) > td:first-child {
  background-color: var(--table-stripe-bg) !important;
}

Troubleshoot table styles

• Some tables still look different: The article may have its own <style> tag or inline styles, which can come along when you paste from another editor. Open the article's code view, look for a <style> tag, and remove the table rules in it.
• Table text is too small or won't wrap: Your Custom CSS may already have an older table rule, such as body table td, that sets a font size or stops wrapping. Select Find in the Custom CSS editor or use Ctrl+F (Command+F on a Mac) to search for table, then remove or update the older rule.
• The CSS doesn't change anything: Make sure you pasted it in Custom CSS, not Custom HTML. The CSS targets the hg-article-body class, which is in the standard article layout, so a customized Article HTML template may need a different selector.

If your tables still don't look right, contact us and send us a link to an article with a table that looks wrong.

Background

Tables get their formatting from several places. The article editor's table properties, such as Bordered Table, style one table at a time. Tables from imports or pasted content bring their own formatting as inline styles. Custom CSS styles every table in your knowledge base at once, and the !important rules in the pasted tables section are what let it override that inline formatting.

Refer to Customize style or layout with HTML/CSS for more about editing your Custom CSS. If you want to start over, Default Custom CSS has the original CSS to copy back in.