# Perspective table col header and cells not aligning

**URL:** <https://forum.inductiveautomation.com/t/perspective-table-col-header-and-cells-not-aligning/52472>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 28, 2021, 5:26pm UTC](https://forum.inductiveautomation.com/t/perspective-table-col-header-and-cells-not-aligning/52472 "2021-10-28T17:26:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ShaneH](https://avatars.discourse-cdn.com/v4/letter/s/3e96dc/32.png) [@ShaneH](https://forum.inductiveautomation.com/u/ShaneH)\
**Post date:** [October 28, 2021, 5:26pm UTC](https://forum.inductiveautomation.com/t/perspective-table-col-header-and-cells-not-aligning/52472/1 "2021-10-28T17:26:54Z")

</div>

Using Perspective 8.1.10

For a table, there are multiple places to set “style” properties. For this issue, I’m focusing on these three:

1. cells/style - presumably applies to all cells (but not headers)
2. column[#]/heading/style - presumably applies to the heading of the column
3. column[#]/style - presumably applies to the whole column (but not the headers?)

If I create a table, and set margin/padding on the cells/style property, but do NOT set the same margin/padding on the column[#]/heading/style, after adding enough columns, the headers no longer align with the cells below.

Also, it seems to ignore any margin/padding set on column[#]/style.

---

<div class="post-metadata">

**Author:** ![ShaneH](https://avatars.discourse-cdn.com/v4/letter/s/3e96dc/32.png) [@ShaneH](https://forum.inductiveautomation.com/u/ShaneH)\
**Post date:** [October 28, 2021, 11:09pm UTC](https://forum.inductiveautomation.com/t/perspective-table-col-header-and-cells-not-aligning/52472/2 "2021-10-28T23:09:41Z")

</div>

Actually looks like column[#]/style has been updated.

This feature was changed in Ignition version **8.1.11**

So I might need to retest.

---

<div class="post-metadata">

**Author:** ![ryanjmclaughlin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryanjmclaughlin/32/4318_2.png) [@ryanjmclaughlin](https://forum.inductiveautomation.com/u/ryanjmclaughlin)\
**Post date:** [November 19, 2021, 6:45pm UTC](https://forum.inductiveautomation.com/t/perspective-table-col-header-and-cells-not-aligning/52472/3 "2021-11-19T18:45:27Z")

</div>

> [@ShaneH](#):
>
> after adding enough columns, the headers no longer align with the cells below.

I'm trying to find the other thread on this, but it is highly annoying. The header style has a 5px margin and the cell content does not. To make the header left aligned to the cell content you need to add a cells.style.marginLeft = 5px on every table you use. Super annoying, I just did this 5 times today.

---

<div class="post-metadata">

**Author:** ![scottmwyant](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/scottmwyant/32/66369_2.png) [@scottmwyant](https://forum.inductiveautomation.com/u/scottmwyant)\
**Post date:** [April 13, 2022, 1:34am UTC](https://forum.inductiveautomation.com/t/perspective-table-col-header-and-cells-not-aligning/52472/4 "2022-04-13T01:34:02Z")

</div>

I’m on v8.1.16 and having this same issue. Seems to me like the header has a “built in” `padding-left: 5px` but the cells do not. You can confirm it’s padding not margin by applying a border to the header then manipulating the margin and padding.

Combining @ryanjmclaughlin’s findings and my own distinction between margin and padding, adding `padding-left: 5px` fixes the issue. Definitely seems this should come “out-of-the-box” with the table component.

---

<div class="post-metadata">

**Author:** ![Nathan\_Foster](https://avatars.discourse-cdn.com/v4/letter/n/ecd19e/32.png) [@Nathan\_Foster](https://forum.inductiveautomation.com/u/Nathan_Foster)\
**Post date:** [April 13, 2022, 3:13pm UTC](https://forum.inductiveautomation.com/t/perspective-table-col-header-and-cells-not-aligning/52472/5 "2022-04-13T15:13:21Z")

</div>

I’m also on v8.1.16 and having this issue with all my tables. When I looked at the rendered HTML/CSS with the developer tool, it looks like the flex style is being removed on the last column for some reason. The flex style isn’t removed on the header column, thus causing a misalignment. When I manually put it back in with the developer tool, it fixes it. This might be a bug with v8.1.16.

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [October 28, 2022, 5:37pm UTC](https://forum.inductiveautomation.com/t/perspective-table-col-header-and-cells-not-aligning/52472/6 "2022-10-28T17:37:43Z")

</div>

I have the issue in 8.1.19

Took me a while to figure out where to put what to get the style to fix my table.  
For quick reference in the future, I made a style and applied it in this manner on the table.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/4/44af2ce7f862e23019314f15175c2f04d76e55ab.png)
