# Reduce line spacing from text nodes

**URL:** <https://discourse.nodered.org/t/reduce-line-spacing-from-text-nodes/96216>\
**Category:** Dashboard\
**Created:** [24 March 2025 12:00 UTC](https://discourse.nodered.org/t/reduce-line-spacing-from-text-nodes/96216 "2025-03-24T12:00:03Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Becker](https://avatars.discourse-cdn.com/v4/letter/b/c77e96/32.png) [@Becker](https://discourse.nodered.org/u/Becker)\
**Post date:** [24 March 2025 12:00 UTC](https://discourse.nodered.org/t/reduce-line-spacing-from-text-nodes/96216/1 "2025-03-24T12:00:03Z")

</div>

Hi, is it possible to reduce line spacing of text nodes with a template including some css:

 ![132312](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/b/0bdef634672e38cdc7e2112d2fd752ec57a321ae.jpeg)  
?

or do I have to create a table on my own like I did for fail2ban:

```auto
<div>
    <table class="table table-bordered" style="width: 100%; border-collapse: collapse;">
        <thead>
            <tr>
                <th>Zeitpunkt</th>
                <th>IP Adresse</th>
                <th>Dienst</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="entry in msg.payload">
                <td>{{ entry.time }}</td>
                <td>{{ entry.IP }}</td>
                <td>{{ entry.Dienst }}</td>
            </tr>
        </tbody>
    </table>
</div>

```

what would be much more work for me.

Greetings

---

<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:** [24 March 2025 13:13 UTC](https://discourse.nodered.org/t/reduce-line-spacing-from-text-nodes/96216/2 "2025-03-24T13:13:21Z")

</div>

> [@Becker](#):
>
> is it possible to reduce line spacing of text nodes with a template including some css

Yes, of course. Its all just HTML.

All you need is to determine the best/most suitable CSS selector and apply the overrides you desire.

Personally, so as not to affect all text nodes across the entirety of the dashboard, I would set a classname on the text nodes I want to affect and when i declare the CSS (in a ui-template set for CSS mode) I would address the styles using my chosen classname.

---

<div class="post-metadata">

**Author:** ![Becker](https://avatars.discourse-cdn.com/v4/letter/b/c77e96/32.png) [@Becker](https://discourse.nodered.org/u/Becker)\
**Post date:** [24 March 2025 21:28 UTC](https://discourse.nodered.org/t/reduce-line-spacing-from-text-nodes/96216/3 "2025-03-24T21:28:15Z")

</div>

can you tell me the css code for that ?

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [25 March 2025 05:10 UTC](https://discourse.nodered.org/t/reduce-line-spacing-from-text-nodes/96216/4 "2025-03-25T05:10:48Z")

</div>

may be something like....

```auto
div.a {
  line-height: normal;
}

div.b {
  line-height: 1.6;
}

div.c {
  line-height: 80%;
}

div.d {
  line-height: 200%;
}

```

---

<div class="post-metadata">

**Author:** ![Becker](https://avatars.discourse-cdn.com/v4/letter/b/c77e96/32.png) [@Becker](https://discourse.nodered.org/u/Becker)\
**Post date:** [27 March 2025 21:13 UTC](https://discourse.nodered.org/t/reduce-line-spacing-from-text-nodes/96216/5 "2025-03-27T21:13:15Z")

</div>

I´ve rebuild a few tabs to one tab with tables. but I can't understand the logic of Node-Red Dashboard.  
sometimes it makes the individual flex containers the same, sometimes a table is longer towards the bottom, sometimes there is an unnecessary scroll wheel.

Did you unterstand the logic ?

here is my style:

```auto
<style>
    body {
        //font-size: 12px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        font-weight: bold;
    }

    td,
    th {
        //font-size: 12px;
    }

    td {
        padding: 4px;
        text-align: left;
        border: 1px solid #ddd;
    }

    td:nth-child(1),
    th:nth-child(1) {
        width: 22%;
    }

    td:nth-child(2),
    th:nth-child(2) {
        text-align: right;
    }

    td:nth-child(3),
    th:nth-child(3) {
        text-align: right;
    }

    td:nth-child(4),
    th:nth-child(4) {
        text-align: right;
    }

    td:nth-child(5),
    th:nth-child(5) {
        text-align: right;
    }

    .rot {
        color: red;
    }

    .grün {
        color: green;
    }

    .blau {
        color: blue;
    }
</style>

```

the first container:

```auto
<table>
    <th></th>
    <td>Gesamt</td>
    <td>L1</td>
    <td>L2</td>
    <td>L3</td>
    <tr>
        <td>Leistung</td>
        <td class="{{msg.payload.P < 0 ? 'grün' : 'rot'}}">{{msg.payload.P}} W</td>
        <td class="{{msg.payload.P1 < 0 ? 'grün' : 'rot'}}">{{msg.payload.P1}} W</td>
        <td class="{{msg.payload.P2 < 0 ? 'grün' : 'rot'}}">{{msg.payload.P2}} W</td>
        <td class="{{msg.payload.P3 < 0 ? 'grün' : 'rot'}}">{{msg.payload.P3}} W</td>
    </tr>
    <tr>
        <td>Strom</td>
        <td class="blau">{{msg.payload.IN}} A</td>
        <td>{{msg.payload.I1}} A</td>
        <td>{{msg.payload.I2}} A</td>
        <td>{{msg.payload.I3}} A</td>
    </tr>
    <tr>
        <td>Blindleistung</td>
        <td>{{msg.payload.Q}} var</td>
        <td>{{msg.payload.Q1}} var</td>
        <td>{{msg.payload.Q2}} var</td>
        <td>{{msg.payload.Q3}} var</td>
    </tr>
    <tr>
        <td>cos phi</td>
        <td>{{msg.payload.PF}}</td>
        <td>{{msg.payload.PF1}}</td>
        <td>{{msg.payload.PF2}}</td>
        <td>{{msg.payload.PF3}}</td>
    </tr>
    <tr>
        <td class="grün">Zähler Einsp.</td>
        <td colspan="2">{{msg.payload.W_exp}} kWh</td>
    </tr>
    <tr>
        <td class="grün">Zähler effektiv</td>
        <td colspan="2">{{msg.payload.W_eff}} kWh</td>
    </tr>
    <tr>
        <td class="rot">Zähler Bezug</td>
        <td colspan="2">{{msg.payload.W_imp}} kWh</td>
    </tr>
</table> 

```

here the results:

 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/b/8b2d5eb8a98765268b0156029eca4566d2de456c.png)  
unnecessary scroll wheel for example

 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/1/c151332e7e7ef96a2beb0aeaeb0bee7edd30431a.png)  
i had to put "& #8203; -br- & #8203;" under the table code, otherwise I have unnecessary scroll wheels in the container or some containers are of different lengths.

I would be very grateful for tips from a css pro.

---

<div class="post-metadata">

**Author:** ![Becker](https://avatars.discourse-cdn.com/v4/letter/b/c77e96/32.png) [@Becker](https://discourse.nodered.org/u/Becker)\
**Post date:** [27 March 2025 21:45 UTC](https://discourse.nodered.org/t/reduce-line-spacing-from-text-nodes/96216/6 "2025-03-27T21:45:16Z")

</div>

If I fix automatic size adjustment

 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/8/c814594b2c3f2b90d5cf2b23be3e234f60a7dbbb.png)  
the containers are too small in height, can I set the high somewhere?

---

<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:** [26 April 2025 21:46 UTC](https://discourse.nodered.org/t/reduce-line-spacing-from-text-nodes/96216/7 "2025-04-26T21:46:05Z")

</div>

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