# Remove the column headers from the Alarm Status Table via CSS?

**URL:** <https://forum.inductiveautomation.com/t/remove-the-column-headers-from-the-alarm-status-table-via-css/55857>\
**Category:** Ignition\
**Tags:** ignition81\
**Created:** [February 8, 2022, 10:18am UTC](https://forum.inductiveautomation.com/t/remove-the-column-headers-from-the-alarm-status-table-via-css/55857 "2022-02-08T10:18:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [February 8, 2022, 10:18am UTC](https://forum.inductiveautomation.com/t/remove-the-column-headers-from-the-alarm-status-table-via-css/55857/1 "2022-02-08T10:18:23Z")

</div>

v8.1.5

I’m on an ancient version and maybe it’s already solved, but is there any way that I can force the column headings in the responsive alarm status table to go away?  
I can do this by setting their flex css manually via the browser dev tools to:  
`flex: 0 1 0` instead of `flex: 50px 1 auto`

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

Will using !important even override something like this where the style has been provided as part of the component rather than as part of the class css? or will the component’s declaration always take precedence?  
And if so, how would I select this particular thing i.e. the `data-column-id="label"`?

---

<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:** [February 8, 2022, 11:02am UTC](https://forum.inductiveautomation.com/t/remove-the-column-headers-from-the-alarm-status-table-via-css/55857/2 "2022-02-08T11:02:03Z")

</div>

> [@nminchin](#):
>
> this particular thing i.e. the `data-column-id="label"`

you can select **attributes** like this:

`div[data-column-id="label"]`

And yes ! important will overrule inline styles

ill take a look at the rest after my lunch break xd

---

<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:** [February 8, 2022, 11:33am UTC](https://forum.inductiveautomation.com/t/remove-the-column-headers-from-the-alarm-status-table-via-css/55857/3 "2022-02-08T11:33:36Z")

</div>

Soo for my version 8.1.14 this works:

```auto
.ia_alarmStatusTableComponent .ia_table__cell[data-column-id="label"] {
    flex: 0 1 0 !important;
}

```

you might want to add `.ia_table__cell[data-column-id="card"]` in between to be sure it only hits the small card layouts. `.ia_alarmStatusTableComponent .ia_table__cell[data-column-id="card"] .ia_table__cell[data-column-id="label"]` cuz idk of the label is being used elsewhere in the component

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [February 8, 2022, 11:39am UTC](https://forum.inductiveautomation.com/t/remove-the-column-headers-from-the-alarm-status-table-via-css/55857/4 "2022-02-08T11:39:20Z")

</div>

How would I add other columns into there as well e.g. data-column-id=“display” ? just add another .ia\_table\_\_cell[…] to the end?

Oh wait, that wiped them both out, all good 🙂

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

Sweet! cheers