---
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-02-12T09:54:09Z
published: 2026-02-16T03:51:13Z
---

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

**Table style** is an important element in Document360 or in any possible avenue for creating a rich design layout for a document. Document360 has better layout options for **tables and table elements**.

Arranging information in a specific arrangement, typically with rows and columns, can help in understanding the complex structures of data.

## Style the tables using CSS Snippets in Document360

To style the tables using CSS Snippets,

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

![Site customization options for branding, colors, and layout settings in a web application.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1770889881735.png)
3. From the left navigation pane, click the **CSS** tab.
4. Click **Add code snippets** on the top right of the code space.

A panel appears, preloaded with seven basic snippets that you can use to customize your knowledge base site.
5. Click the **Change table styles** (the snippet appears on the Custom CSS code block).
6. Click **Ctrl+S** or **Save**on the top right to save the change.

![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1770890032229.png)

### Adding custom CSS

You can also add custom CSS styling to your table, apart from the default snippet provided.

For example,

```css
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;
}
```

If you input this custom CSS code in the code space in the **CSS**tab, your output will appear as follows: ![02_Screenshot_Table_style_CSS](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/02_Screenshot_Table_style_CSS.png)

---

### FAQ

#### How can I remove table grids or borders in Document360?

To remove table borders or grids, follow these steps:

1. Navigate to **Settings** (**) in the left navigation bar****in the Knowledge base portal.
2. In the left navigation pane, navigate to **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript**.
3. In the **CSS** tab, paste the following code:

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

Here, the class name is `no-border-table`. You can customize the code based on your preferred class name.

> [!NOTE]
> ** NOTE
> 
> Make sure the class names in your HTML (`no-border-table`) exactly match the class names you defined in your CSS. Otherwise, the layout won’t be applied. Mention if any changes must be made specific to Markdown or Advanced WYSIWYG.