# How to set transparent background for the Table component?

**URL:** <https://forum.inductiveautomation.com/t/how-to-set-transparent-background-for-the-table-component/73836>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [May 17, 2023, 1:06pm UTC](https://forum.inductiveautomation.com/t/how-to-set-transparent-background-for-the-table-component/73836 "2023-05-17T13:06:11Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michal\_Goralczyk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/michal_goralczyk/32/55564_2.png) [@Michal\_Goralczyk](https://forum.inductiveautomation.com/u/Michal_Goralczyk)\
**Post date:** [May 17, 2023, 1:06pm UTC](https://forum.inductiveautomation.com/t/how-to-set-transparent-background-for-the-table-component/73836/1 "2023-05-17T13:06:11Z")

</div>

Hello,  
is it possible to set transparent backgrounds for the Table component from the perspective? I can't set it in any ways.

I would like the background of the table to come from the compnent underneath - blue color

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

Regards  
Michał

---

<div class="post-metadata">

**Author:** ![Tim\_Carlton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tim_carlton/32/52835_2.png) [@Tim\_Carlton](https://forum.inductiveautomation.com/u/Tim_Carlton)\
**Post date:** [May 17, 2023, 2:16pm UTC](https://forum.inductiveautomation.com/t/how-to-set-transparent-background-for-the-table-component/73836/2 "2023-05-17T14:16:14Z")

</div>

In the properties for the table item add an item to the style  
`backgroundColor: transparent`

Then in the rows you will need to change striped enabled to false.  
Header and Footer will also have colors to change as well.

---

<div class="post-metadata">

**Author:** ![Tim\_Carlton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tim_carlton/32/52835_2.png) [@Tim\_Carlton](https://forum.inductiveautomation.com/u/Tim_Carlton)\
**Post date:** [May 17, 2023, 2:20pm UTC](https://forum.inductiveautomation.com/t/how-to-set-transparent-background-for-the-table-component/73836/3 "2023-05-17T14:20:57Z")

</div>

Note: this will break a lot of the UI cues that are built into the table.

If the table ends up on top of graphical elements then they will show through and the content will be hard to read. If the table ends up on top of text elements and they align then the results will be misleading.

I would recommend not doing this.

If you want the same blue background as the root container then use the same css style link as the root container uses.

---

<div class="post-metadata">

**Author:** ![Michal\_Goralczyk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/michal_goralczyk/32/55564_2.png) [@Michal\_Goralczyk](https://forum.inductiveautomation.com/u/Michal_Goralczyk)\
**Post date:** [May 18, 2023, 6:59am UTC](https://forum.inductiveautomation.com/t/how-to-set-transparent-background-for-the-table-component/73836/4 "2023-05-18T06:59:50Z")

</div>

I set all styles as transaprent and changed striped to Enabled False however only the footer became transparent.

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/2/625c051b3f159171d7b550aa65629876c4496638.png)

I'm doing it through a transparent background because, in truth, in the background will be the graphic, which is the main effect of the whole visualization.

---

<div class="post-metadata">

**Author:** ![Tim\_Carlton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tim_carlton/32/52835_2.png) [@Tim\_Carlton](https://forum.inductiveautomation.com/u/Tim_Carlton)\
**Post date:** [May 18, 2023, 1:48pm UTC](https://forum.inductiveautomation.com/t/how-to-set-transparent-background-for-the-table-component/73836/5 "2023-05-18T13:48:44Z")

</div>

I must have left some test settings in the browser's developer tools yesterday.

Today's result:

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

Bright transparent colors for illustrating which settings affect which pieces.

First I added a few styles:  
**Test/TableBackground**  
(translucent magenta)

```auto
{
  "base": {
    "style": {
      "backgroundColor": "#F316C861"
    }
  }
}

```

**Test/TableHeader**  
(translucent cyan)

```auto
{
  "base": {
    "style": {
      "backgroundColor": "#A6EFF39C"
    }
  }
}

```

**Test/TableSelected**  
(translucent orange)

```auto
{
  "base": {
    "style": {
      "backgroundColor": "#CA753087"
    }
  }
}

```

There is an IA style that get applied and I couldn't find a way to turn that off so I applied a global change to that in stylesheet.css. This will affect all tables in this Perspective project.

```auto
.ia_container--secondary {
  background-color: unset;
}

.ia_table __headContainer, .ia_table__ footContainer {
  background-color: unset;
}

```

I then applied those style to the table  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/5/450e815d3d44ea298eb004f442efc7c8a3eef52e.png)

Changed the striped row colors. Note that I couldn't use a style for the striped colors.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/1/31fe7dc0dd305d509ccdc84ce1a6af6c295eb273.png)

I attempted to make the selection translucent as well  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/c/5c1461aa4391ea2e5f396a054228a131f577b808.png)  
but that actually had no effect. The selected color does not seem to come from these settings.

---

<div class="post-metadata">

**Author:** ![Michal\_Goralczyk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/michal_goralczyk/32/55564_2.png) [@Michal\_Goralczyk](https://forum.inductiveautomation.com/u/Michal_Goralczyk)\
**Post date:** [May 19, 2023, 6:55am UTC](https://forum.inductiveautomation.com/t/how-to-set-transparent-background-for-the-table-component/73836/6 "2023-05-19T06:55:03Z")

</div>

> [@Tim\_Carlton](#):
>
> There is an IA style that get applied and I couldn't find a way to turn that off so I applied a global change to that in stylesheet.css. This will affect all tables in this Perspective project.

It looks like your way works, that's exactly what I wanted. Thank you for your advice!

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/0/b070afdae0f90f36916b26e210ecea88d71ebd65.jpeg)

Regards,  
Michał