# Table weird columns user interface (missing column start and end visual cues)

**URL:** <https://forum.inductiveautomation.com/t/table-weird-columns-user-interface-missing-column-start-and-end-visual-cues/83258>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [December 18, 2023, 2:31pm UTC](https://forum.inductiveautomation.com/t/table-weird-columns-user-interface-missing-column-start-and-end-visual-cues/83258 "2023-12-18T14:31:08Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![r.p](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@r.p](https://forum.inductiveautomation.com/u/r.p)\
**Post date:** [December 18, 2023, 2:31pm UTC](https://forum.inductiveautomation.com/t/table-weird-columns-user-interface-missing-column-start-and-end-visual-cues/83258/1 "2023-12-18T14:31:08Z")

</div>

I find the table user interface extremely confusing for the following reasons:

- it is not clear where a column in the header starts and where it ends, and the same happens for a column in the table (unless I select a cell in that case the cell is highlighted with a blue border as in the image below)
- the "order by" icon with the arrow up and arrow down symbol is aligned next to the column title and not the end of the column which would have given a visual cue of where the column ends

 ![tempsnip](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/a/0a694e9d3fd4cba51476b50425d0c36666314a38.png)

I keep getting confused when I look at tables due to the above two bullets, hope there is a way to address this issue.

---

<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:** [December 18, 2023, 2:47pm UTC](https://forum.inductiveautomation.com/t/table-weird-columns-user-interface-missing-column-start-and-end-visual-cues/83258/2 "2023-12-18T14:47:42Z")

</div>

Perspective (I've added the tag to your question) uses CSS styles. Most of the components have a `props.styles` where you can control these.

- In the Project Browser, right-click on Perspective → Styles, and create a new style class, e.g., `tableHeader`.
- Go to the Border section and hit the Unlink Sides button so that you can control each of the bounding box borders individually. Set the right border to Solid, 1 px, and select a color. (See [Perspective Built-In Themes - Ignition User Manual 8.1 - Ignition Documentation](https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes) for how to do this consistently through your application. Don't just apply random colors.) OK your style to save it.
- Select the table. On the Perspective Property Editor go set  
`headerStyle.classes : tableHeader`  
(You can select the class from the dropdown in the classes section.)

That's it!

---

<div class="post-metadata">

**Author:** ![r.p](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@r.p](https://forum.inductiveautomation.com/u/r.p)\
**Post date:** [December 18, 2023, 2:58pm UTC](https://forum.inductiveautomation.com/t/table-weird-columns-user-interface-missing-column-start-and-end-visual-cues/83258/3 "2023-12-18T14:58:51Z")

</div>

> [@Transistor](#):
>
> Perspective → Styles, a

Hi, I know about the possibility of editing the style of the table but was thinking about the default in Ignition which is not very user friendly.  
Anyway setting the border style and applying it to a table is already leaps better, below how it renders now.

 ![tempsnip](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/b/db55c140f4639558806fb52f7f7bf173f3e77908.png)

I find the "order by" icon still confusing just after the text, I would have put it aligned to the right but don't know whether it's possible to address it through CSS.