# How to add table grid (rows and cols)

**URL:** <https://forum.inductiveautomation.com/t/how-to-add-table-grid-rows-and-cols/106495>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [May 21, 2025, 8:23am UTC](https://forum.inductiveautomation.com/t/how-to-add-table-grid-rows-and-cols/106495 "2025-05-21T08:23:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mmadariaga](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmadariaga/32/63201_2.png) [@mmadariaga](https://forum.inductiveautomation.com/u/mmadariaga)\
**Post date:** [May 21, 2025, 8:23am UTC](https://forum.inductiveautomation.com/t/how-to-add-table-grid-rows-and-cols/106495/1 "2025-05-21T08:23:58Z")

</div>

Is there a simple way to add row and col borders to a table? Adding a border to cells' style creates a double border for the inside part of the cells and a single one for the outside. I just want all the lines to be the same width. Am I missing something?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/1/2111a92d0766528cd49e29236bf62fc5a06afc48.png)

---

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [May 21, 2025, 2:11pm UTC](https://forum.inductiveautomation.com/t/how-to-add-table-grid-rows-and-cols/106495/2 "2025-05-21T14:11:11Z")

</div>

Create a cell border with just top and left, then create a border for the table of just right and bottom.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [May 21, 2025, 5:57pm UTC](https://forum.inductiveautomation.com/t/how-to-add-table-grid-rows-and-cols/106495/3 "2025-05-21T17:57:44Z")

</div>

- In Project Browser | Perspective | Styles | New Style. Give it a name, e.g., cellBorder.
- Border | Border style: solid | Border width:1px | Border color: var(--neutral-50). OK.1
- Select the table.
- In each `columns.x.style.classes` click the dropdown and apply your cellBorder style.

1 If you find that the borders are a bit heavy because the bottom border of one cell will touch the top border of the cell below it then use Ryan's tricks. You'll then need a second style `fullBorder` to apply to the whole table via `style.classes`.

This may be introducing you to CSS styles on which modern web design is based. It's little trouble and makes it very easy to apply styles consistently throughout an application and to edit them. See [Style Classes | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/styles/style-classes) for more on this.

It might also be introducing the use of [Perspective Built-In Themes | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/styles/perspective-built-in-themes). Again, you should familiarise yourself with this and apply it - nearly everywhere so that component colors follow your theme automatically. e.g., switching from light to dark.