# Increase font size of Node Red table (Tabulator)

**URL:** https://discourse.nodered.org/t/increase-font-size-of-node-red-table-tabulator/59146
**Category:** Dashboard
**Created:** [28 February 2022 22:26 UTC](https://discourse.nodered.org/t/increase-font-size-of-node-red-table-tabulator/59146 "2022-02-28T22:26:04Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![tcr000](https://avatars.discourse-cdn.com/v4/letter/t/65b543/32.png) [@tcr000](https://discourse.nodered.org/u/tcr000)
#### Post date: [28 February 2022 22:26 UTC](https://discourse.nodered.org/t/increase-font-size-of-node-red-table-tabulator/59146/1 "2022-02-28T22:26:04Z")

</div>

I would like to increase the font size in node-red-node-ui-table or node-red-contrib-ui-etable, both of which are based on Tabulator. I tried using the Template node, increasing the font size of the group that contains the table, but to no affect. I took a look at the file tabulator.min.css in etable's css folder and saw that the font-size was set to 14px. Changing that to a larger value did increase the font size. Is there a way to do this from the Template node? I hate to modify etable's css code. Is the problem that the entry in tabulator.min.css is overriding anything set by Template?

Thanks,  
Tom

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [1 March 2022 13:27 UTC](https://discourse.nodered.org/t/increase-font-size-of-node-red-table-tabulator/59146/2 "2022-03-01T13:27:53Z")

</div>

Add a UI template (set to head), add style tags & enter the necessary CSS.

---

<div class="post-metadata">

### Author: ![tcr000](https://avatars.discourse-cdn.com/v4/letter/t/65b543/32.png) [@tcr000](https://discourse.nodered.org/u/tcr000)
#### Post date: [1 March 2022 20:49 UTC](https://discourse.nodered.org/t/increase-font-size-of-node-red-table-tabulator/59146/3 "2022-03-01T20:49:57Z")

</div>

My table is in the Options group in the Setup tab so I tried adding a template node with:

```auto
<style>
#Setup_Options > * {
    font-size: 24px;
}
</style>

```

But this did not work.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [1 March 2022 20:56 UTC](https://discourse.nodered.org/t/increase-font-size-of-node-red-table-tabulator/59146/4 "2022-03-01T20:56:42Z")

</div>

> [@tcr000](#):
>
> `#Setup_Options`

Is `Setup_Options` the id of the table?

You probably need to get a more specific selector for the table.

Use devtools to copy the selector

[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/a/4ab51d7ea5c424d85deadd89c47a7afb441d102a.jpeg "How to find the css selector in chrome") ](https://www.youtube.com/watch?v=GMk7ZLuo6Po&t=30)

---

<div class="post-metadata">

### Author: ![tcr000](https://avatars.discourse-cdn.com/v4/letter/t/65b543/32.png) [@tcr000](https://discourse.nodered.org/u/tcr000)
#### Post date: [1 March 2022 21:07 UTC](https://discourse.nodered.org/t/increase-font-size-of-node-red-table-tabulator/59146/5 "2022-03-01T21:07:06Z")

</div>

I found:  
#ui\_etable-796  
but it looks like Node Red creates a new ID each time it is deployed.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [1 March 2022 21:28 UTC](https://discourse.nodered.org/t/increase-font-size-of-node-red-table-tabulator/59146/6 "2022-03-01T21:28:57Z")

</div>

The parent container won't. So you can grab the selector for that & use ..

`.parent-container-selector > .table` or whatever the element for take is.

I've don't use the id

---

<div class="post-metadata">

### Author: ![tcr000](https://avatars.discourse-cdn.com/v4/letter/t/65b543/32.png) [@tcr000](https://discourse.nodered.org/u/tcr000)
#### Post date: [1 March 2022 21:59 UTC](https://discourse.nodered.org/t/increase-font-size-of-node-red-table-tabulator/59146/7 "2022-03-01T21:59:44Z")

</div>

This worked:

#Setup\_Parameters\_cards \> md-card \> .tabulator

---

<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: [31 March 2022 22:00 UTC](https://discourse.nodered.org/t/increase-font-size-of-node-red-table-tabulator/59146/8 "2022-03-31T22:00:12Z")

</div>

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