# Ui-table and css - fails for more than one table

**URL:** <https://discourse.nodered.org/t/ui-table-and-css-fails-for-more-than-one-table/32453>\
**Category:** Dashboard\
**Created:** [4 September 2020 15:16 UTC](https://discourse.nodered.org/t/ui-table-and-css-fails-for-more-than-one-table/32453 "2020-09-04T15:16:45Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jodelkoenig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jodelkoenig/32/44645_2.png) [@jodelkoenig](https://discourse.nodered.org/u/jodelkoenig)\
**Post date:** [4 September 2020 15:16 UTC](https://discourse.nodered.org/t/ui-table-and-css-fails-for-more-than-one-table/32453/1 "2020-09-04T15:16:45Z")

</div>

Hi there,

due to a private discussion with a fellow member of this forum I came across a limitation of my approach to customize a ui-table with css.

While it works great for one table, it falls back to default if I choose more than one table.

It works as follows:

- set a **ui-table** according to your needs and assign it to ui-group _"whatever"_
- add a **ui-template** , set Template Type to "Widget in group", assign it to the same ui-group _"whatever"_ and apply your css code

Check the example I posted [here](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/63).

Now:

If I want to add more ui-table nodes to the very same ui-group _"whatever"_ the css adjustments in ui-template are ignored. All tables are shown with default/standard layout. Is this by design, an error or do I miss something here?

Note:

A workaround that works: Assign each additional table to a separate ui-group, uncheck "Display group name" and arrange those tables as needed on the dashboard page. However, downside is, that it requires multiple clones of the **very same** ui-template. Each assigned to a different ui-group though.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [4 September 2020 16:22 UTC](https://discourse.nodered.org/t/ui-table-and-css-fails-for-more-than-one-table/32453/2 "2020-09-04T16:22:15Z")

</div>

The general assumption is that the dashboard is themed once and that all instances of widgets pick up the overall theme. I suspect the workaround you have that allocates each to it's own template then allows you to target your CSS more precisely is probably the best answer.

---

<div class="post-metadata">

**Author:** ![jodelkoenig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jodelkoenig/32/44645_2.png) [@jodelkoenig](https://discourse.nodered.org/u/jodelkoenig)\
**Post date:** [4 September 2020 16:38 UTC](https://discourse.nodered.org/t/ui-table-and-css-fails-for-more-than-one-table/32453/3 "2020-09-04T16:38:18Z")

</div>

Thanks dceejay for your answer. So I am not missing a bit here. It works as designed.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [4 September 2020 16:50 UTC](https://discourse.nodered.org/t/ui-table-and-css-fails-for-more-than-one-table/32453/4 "2020-09-04T16:50:25Z")

</div>

Does that explain why, with more than one table, the css applies to none of them? I would have expected it to apply to all of them.

---

<div class="post-metadata">

**Author:** ![jodelkoenig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jodelkoenig/32/44645_2.png) [@jodelkoenig](https://discourse.nodered.org/u/jodelkoenig)\
**Post date:** [4 September 2020 17:16 UTC](https://discourse.nodered.org/t/ui-table-and-css-fails-for-more-than-one-table/32453/5 "2020-09-04T17:16:01Z")

</div>

> [@Colin](#):
>
> I would have expected it to apply to all of them.

That was my assumption as well. I just tested it again. And it is even crazier.

If, in my setup, I just clone my ONE table, both table show in the same group, however, layout is back to default.

If I then re-assign the table clone to another group of that page, my customizing applies to both table. Even though the ui-template node is neither cloned as well nor is it in any way assigned to the ui-group of the clone.

_Further tests and further craziness:_

If I swap the ui-group in the ui-template to that assigned to the table clone's group, my tables are back to default layout and my css is completely ignored.

original table assigned to [Z]A  
cloned table assigned to [Z]B

ui-template assigned to [Z]A --\> my css customization works fine for both table  
ui-template assigned to [Z]B --\> my css customization doesn't work for both table

Does the alphabetical order of groups have an effect here? In the final gui itself, [Z]A is listed below [Z]B 😃

DISCLAIMER: I have no clue about CSS at all. I "developed" my solution based on trial and error. I only have a vague gut feeling how things work, but I am at least able to share my observation here 😃

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [4 September 2020 17:34 UTC](https://discourse.nodered.org/t/ui-table-and-css-fails-for-more-than-one-table/32453/6 "2020-09-04T17:34:00Z")

</div>

Clear the browser cache when anything odd happens just to make sure that is not the problem.

---

<div class="post-metadata">

**Author:** ![jodelkoenig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jodelkoenig/32/44645_2.png) [@jodelkoenig](https://discourse.nodered.org/u/jodelkoenig)\
**Post date:** [4 September 2020 18:37 UTC](https://discourse.nodered.org/t/ui-table-and-css-fails-for-more-than-one-table/32453/7 "2020-09-04T18:37:03Z")

</div>

I did so with both, Safari and Firefox on macos.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [4 September 2020 20:18 UTC](https://discourse.nodered.org/t/ui-table-and-css-fails-for-more-than-one-table/32453/8 "2020-09-04T20:18:51Z")

</div>

OK, it was just a thought. I think you will have to wait for Dave or someone who knows more about css to comment further.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [4 October 2020 20:18 UTC](https://discourse.nodered.org/t/ui-table-and-css-fails-for-more-than-one-table/32453/9 "2020-10-04T20:18:51Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.