How to add table grid (rows and cols)

Ignition
1

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
image1102×562 41.1 KB

2

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

1 Like
3
  • 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 for more on this.

It might also be introducing the use of Perspective Built-In Themes | Ignition User Manual. 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.

1 Like