---
title: "Customizing table styles"
slug: "table-style"
description: "Style the tables using CSS Snippets in Document360.  In addition to the default snippet provided, you can add custom CSS styling to your table."
updated: 2026-06-20T06:28:13Z
published: 2026-06-20T06:28:13Z
canonical: "docs.document360.com/table-style"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customizing table styles

The **Change table styles** CSS snippet lets you apply consistent styling to all tables in your knowledge base - including borders, padding, header background color, and alternating row colors. By default, tables in Document360 use a minimal style with basic borders. This snippet gives you a ready-made starting point you can modify to match your brand.

---

## How to apply the table styles snippet

1. Navigate to **Settings** () > **Knowledge base site** in the left navigation bar of the Knowledge base portal.
2. In the left navigation pane, navigate to **Site customization**.

![Site customization page showing the Custom CSS and JavaScript option](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1770889881735.png)

1. Click **Custom CSS & JavaScript**.
2. Select the **CSS** tab, then click **Add code snippets** in the top right.
3. Click **Change table styles**. The snippet is inserted into the CSS editor.

![CSS editor showing the Change table styles snippet inserted with border, padding, and background color values](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1770890032229.png)

1. Modify the color values, border widths, and padding values to match your requirements.
2. Click **Ctrl + S** or **Save**.

---

## How to add custom table CSS

You can also write your own table CSS instead of using the pre-loaded snippet. For example:

```
table th, table td {
  border: 1px solid #67cfbf;
  padding: 2px 10px;
}
table th {
  background: #fcf8c0;
  font-weight: 600;
}
table th:empty {
  display: none;
}
tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}
```

![Table displaying employee names, departments, and years of experience in a release note.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/custom%20code%20table%20preview.png)

---

## Best practices

- **Use alternating row colors for readability** - the `nth-child(odd)` rule applies a background color to alternate rows, making wide tables easier to scan across rows.
- **Keep border colors subtle** - a light border color (e.g., `#e0e0e0`) is usually less visually noisy than a strong color, especially for tables with many columns.
- **Test with both sparse and dense tables** - your padding and font size choices may look fine in a small table but create alignment issues in a table with many columns or long cell content.

---

## FAQ

**How do I remove table borders or grids?**

Navigate to {{variable.Settings}} () > {{variable.Knowledge base site}} > **Site customization** > **Custom CSS & JavaScript**. In the **CSS** tab, paste the following code:

```
.no-border-table table tr,
.no-border-table table th,
.no-border-table table td {
    border: none;
}
```

The class name is `no-border-table` - you can customize it to your preferred name. Make sure the class name in your HTML exactly matches the class name defined in your CSS, otherwise the layout will not be applied. Click **Save**.