# Perspective Table: Create a Style Class that Contains Multiple Style Settings

**URL:** <https://forum.inductiveautomation.com/t/perspective-table-create-a-style-class-that-contains-multiple-style-settings/69047>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [January 26, 2023, 7:11pm UTC](https://forum.inductiveautomation.com/t/perspective-table-create-a-style-class-that-contains-multiple-style-settings/69047 "2023-01-26T19:11:10Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [January 26, 2023, 7:11pm UTC](https://forum.inductiveautomation.com/t/perspective-table-create-a-style-class-that-contains-multiple-style-settings/69047/1 "2023-01-26T19:11:10Z")

</div>

I understand basic style classes for perspective, but how can I create a style class that configures a table's style the way I want it regarding multiple style properties like pager style, rows -\> striped settings, etc. I guess it would be changing the default table style settings, so I don't have to reconfigure the table every time I use it. I'm guessing if you can do this it would be with the advanced stylesheet.css file?

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 26, 2023, 7:38pm UTC](https://forum.inductiveautomation.com/t/perspective-table-create-a-style-class-that-contains-multiple-style-settings/69047/2 "2023-01-26T19:38:24Z")

</div>

Take a look at the `table.css` file in the install directory (`C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes\light\common`

Any of these styles can be overwritten from the advanced stylesheet resource. The style that's used will be the last imported.

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [January 26, 2023, 7:46pm UTC](https://forum.inductiveautomation.com/t/perspective-table-create-a-style-class-that-contains-multiple-style-settings/69047/3 "2023-01-26T19:46:45Z")

</div>

I see. Thanks for the tip, that should be the info I need.

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [January 26, 2023, 9:56pm UTC](https://forum.inductiveautomation.com/t/perspective-table-create-a-style-class-that-contains-multiple-style-settings/69047/4 "2023-01-26T21:56:51Z")

</div>

I knew you could override the css global variables, but I couldn't figure out where to find the names. Now that I think about it, the file directory you mentioned is obvious for where they would be.

```auto
.ia_table __body__ row--even {
    background-color: var(--table-rowsEven);
}

.ia_table __body__ row--odd {
    background-color: var(--table-rowsOdd);
}

```

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 26, 2023, 10:06pm UTC](https://forum.inductiveautomation.com/t/perspective-table-create-a-style-class-that-contains-multiple-style-settings/69047/5 "2023-01-26T22:06:39Z")

</div>

I just started playing with CSS recently myself, so it was fresh in my memory and I also did not know what things to overwrite at first. I did the same thing for popup headers. You can find CSS groups for various components within the subfolders for the base styles (light and dark).

You can also overwrite your own custom styles prefixing them with `.psc-` in the stylesheet  
For example, adding fadeIn animation to one of my styles:

```auto
@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.psc-EmbeddedView_Slow {
	animation: fadeIn 1.35s;
}

```

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 26, 2023, 10:13pm UTC](https://forum.inductiveautomation.com/t/perspective-table-create-a-style-class-that-contains-multiple-style-settings/69047/6 "2023-01-26T22:13:18Z")

</div>

Also, [CSS Cheat Sheet - Interactive, not a PDF | HTMLCheatSheet.com](https://htmlcheatsheet.com/css/)

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [January 27, 2023, 1:13pm UTC](https://forum.inductiveautomation.com/t/perspective-table-create-a-style-class-that-contains-multiple-style-settings/69047/7 "2023-01-27T13:13:20Z")

</div>

I like this website too, [Keyframes.app](https://keyframes.app/animate/)