# \[IGN-3992\]CSS: Override base CSS style table component

**URL:** <https://forum.inductiveautomation.com/t/ign-3992-css-override-base-css-style-table-component/79012>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 12, 2023, 1:02pm UTC](https://forum.inductiveautomation.com/t/ign-3992-css-override-base-css-style-table-component/79012 "2023-09-12T13:02:24Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pablo\_Fernandez\_Expo](https://avatars.discourse-cdn.com/v4/letter/p/c67d28/32.png) [@Pablo\_Fernandez\_Expo](https://forum.inductiveautomation.com/u/Pablo_Fernandez_Expo)\
**Post date:** [September 12, 2023, 1:02pm UTC](https://forum.inductiveautomation.com/t/ign-3992-css-override-base-css-style-table-component/79012/1 "2023-09-12T13:02:24Z")

</div>

Hi,

I have a table with subview activated. The whole table uses a CSS custom definition for the style.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/5/35ad33b13dbccdd07c2186cb80321d798f891889.png)

However, I am struggling to style the expander of a table to make it a little bit wider. I am able to change the color without problems, but not the width with the following code the custom CSS:

```auto
/* Style the expander */
.psc-modern-table .t .tc.tc-expand {
	order: -1;
    	max-width: 100px !important;
	width: 100px !important;
	background-color: red;
}

```

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

After some debugging in the web browser, i saw that the base CSS definition has set the max-width as "!important"  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/9/394ecd6bf5b928205b2feb53149863fdb7c5f36f.png)

Is there anyway to override the component base CSS in this case?

Thanks!

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 12, 2023, 2:08pm UTC](https://forum.inductiveautomation.com/t/ign-3992-css-override-base-css-style-table-component/79012/2 "2023-09-12T14:08:07Z")

</div>

Yes, the css with higher **Specificity** will apply over other.  
In this case since you **replaced** `.table-container` with your class, both have the same **Specificity**  
so simply adding in an other class will be enough  
`.psc-modern-table .table-container .t .tc.tc-expand`

> **[Specificity - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)**
>
> Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a CSS...

Its very weird ignition added an !important in their style though... That is concidered bad practice, especiaally for something we are supposed to be able to edit. First time ive seen it though, must have been a oversight of the css'er

---

<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:** [September 12, 2023, 3:21pm UTC](https://forum.inductiveautomation.com/t/ign-3992-css-override-base-css-style-table-component/79012/3 "2023-09-12T15:21:38Z")

</div>

> [@victordcq](#):
>
> Its very weird ignition added an !important in their style though... That is concidered bad practice, especiaally for something we are supposed to be able to edit. First time ive seen it though, must have been a oversight of the css'er

OP didn't show the full path so I can't be sure, but I'm pretty sure that _isn't_ an IA provided file. I don't see any `!important` declarations anywhere in Perspective in our codebase.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 12, 2023, 3:38pm UTC](https://forum.inductiveautomation.com/t/ign-3992-css-override-base-css-style-table-component/79012/4 "2023-09-12T15:38:22Z")

</div>

I have the same as OP:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/f/2fdce927f4675f5b341286f2fa0461dc37515f04.png)

8.1.17 though.

edit: And same thing with a 8.1.31 sandbox

---

<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:** [September 12, 2023, 4:38pm UTC](https://forum.inductiveautomation.com/t/ign-3992-css-override-base-css-style-table-component/79012/5 "2023-09-12T16:38:07Z")

</div>

Huh. I'll have to dig into it further.

---

<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:** [September 13, 2023, 3:21pm UTC](https://forum.inductiveautomation.com/t/ign-3992-css-override-base-css-style-table-component/79012/6 "2023-09-13T15:21:26Z")

</div>

Okay, so it's been this way for a long time, but the educated guess from a more Perspective focused dev is that the hardcoded size is (or was) important to the column logic. But, there is already a ticket to relax that constraint/make the expansion area more customizable, so I've added this thread to that ticket.
