# Remove Shadow Under Table Header

**URL:** <https://forum.inductiveautomation.com/t/remove-shadow-under-table-header/65540>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [October 21, 2022, 5:03pm UTC](https://forum.inductiveautomation.com/t/remove-shadow-under-table-header/65540 "2022-10-21T17:03:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Curtis\_Turley](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Curtis\_Turley](https://forum.inductiveautomation.com/u/Curtis_Turley)\
**Post date:** [October 21, 2022, 5:03pm UTC](https://forum.inductiveautomation.com/t/remove-shadow-under-table-header/65540/1 "2022-10-21T17:03:10Z")

</div>

Does anyone know how to remove the shadow under the header of the table component? I have tried messing with a few of the props in all the various style object with no success.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/e/be77c10b50f47f9749d5926e9cb01e99b879f8dd.png)

---

<div class="post-metadata">

**Author:** ![Matthew.gaitan](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@Matthew.gaitan](https://forum.inductiveautomation.com/u/Matthew.gaitan)\
**Post date:** [October 21, 2022, 5:28pm UTC](https://forum.inductiveautomation.com/t/remove-shadow-under-table-header/65540/2 "2022-10-21T17:28:34Z")

</div>

You can either create a custom theme or use CSS injection to remove the drop shadow from the table you're looking at, or all tables in your project.

To use CSS Injection, create a Style class and place this in the `background-color` property:  
`} .psc-RemoveDropShadow .ia_table __headContainer, .ia_table__ footContainer { box-shadow: unset !important }{`

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

Then, on the table you wish to edit place the `RemoveDropShadow` class in the `style.classes` property  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/c/bc813f21ae8a6dbb9ac38780009c0850cdc7ff8b.png)

If you want this to apply to all tables in your project, you can change the injected CSS to:  
`} .ia_table __headContainer, .ia_table__ footContainer { box-shadow: unset !important }{`

Then you won't need to do the second step

Result  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/b/8b13bba43c79a0cb1446e9179307e2c9d8284402.png)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [October 21, 2022, 5:50pm UTC](https://forum.inductiveautomation.com/t/remove-shadow-under-table-header/65540/3 "2022-10-21T17:50:20Z")

</div>

Or the new stylesheet resource:

> [@New Stylesheet resource](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787):
>
> Starting with the 10/4/2022 Nightly (8.1.22) build, users will be able to modify a new styling resource: stylesheet.css This new resource is considered an advanced feature and will not be in place by default. To place the resource, expand the Perspective node of the Project Browser, right-click the Styles node, and select "Enable Advanced Stylesheet". [EnableStylesheet] Once in place, the stylesheet allows for inserting CSS just as you would in any normal CSS file. The rules defined in this r…

---

<div class="post-metadata">

**Author:** ![Matthew.gaitan](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@Matthew.gaitan](https://forum.inductiveautomation.com/u/Matthew.gaitan)\
**Post date:** [October 21, 2022, 5:52pm UTC](https://forum.inductiveautomation.com/t/remove-shadow-under-table-header/65540/4 "2022-10-21T17:52:02Z")

</div>

patiently waiting for the stable release 🙏

---

<div class="post-metadata">

**Author:** ![Meghan\_Greco](https://avatars.discourse-cdn.com/v4/letter/m/f0a364/32.png) [@Meghan\_Greco](https://forum.inductiveautomation.com/u/Meghan_Greco)\
**Post date:** [July 28, 2023, 1:07pm UTC](https://forum.inductiveautomation.com/t/remove-shadow-under-table-header/65540/5 "2023-07-28T13:07:12Z")

</div>

Just as an FYI for future readers:  
In my experience, if you put the code above in the stylesheet while using another style, it will also remove the background color. I used the snippet below instead and it maintains my background color while also removing the header/footer shadow.

```auto
.ia_table __headContainer, .ia_table__ footContainer {
    box-shadow: none;
}

```