# Getting table header formatted same as table body

**URL:** <https://discourse.nodered.org/t/getting-table-header-formatted-same-as-table-body/76922>\
**Category:** Dashboard\
**Created:** [25 March 2023 10:18 UTC](https://discourse.nodered.org/t/getting-table-header-formatted-same-as-table-body/76922 "2023-03-25T10:18:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![haegar33](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/haegar33/32/38805_2.png) [@haegar33](https://discourse.nodered.org/u/haegar33)\
**Post date:** [25 March 2023 10:18 UTC](https://discourse.nodered.org/t/getting-table-header-formatted-same-as-table-body/76922/1 "2023-03-25T10:18:33Z")

</div>

I got a template node to generate a basic HTML table with status infos on all my zigbee devices.

```auto
<style>
table, {
  text-align: left; border: 2px solid white; width: 100%;
}
tr,th { font-size: small;
}
</style>
<div layout="row" layout-align="start left">
  <table width=100%>
      <tr style="color:orange">
        <th style="width:40%">Lights/Plugs </th>
        <th style="width:50%">last update</th>
        <th style="width:10%">Diff</th>
      </tr>
  </table>
</div>
<div ng-repeat="x in msg.payload">
  <table>
    <tr style="color: white">
      <th style="width:40%">{{x.name}}</th>
      <th style="width:50%">{{x.lasttime}}</th>
      <th style="width:10%">{{x.diff}}</th>
     </tr>
  </table>
</div>

```

Everthing works fine except that the orange header line never is in the same format as the table body. I am aware that I actually construct two tables here but they should be consistent and not look like:

 ![Screen Shot 2023-03-25 at 11.11.32](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/5/45681d711570478fa6f4d6915020410537eb53ff.png)

If I remove the width=100% attribute from the header table tag, the text is squeezed to the left

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [25 March 2023 10:51 UTC](https://discourse.nodered.org/t/getting-table-header-formatted-same-as-table-body/76922/2 "2023-03-25T10:51:00Z")

</div>

Why two tables? You just over complicate things. Unless you are targeting something special which I cant really figure out from what I see.  
Why don' you repeat rows but outer div?  
Why second table uses `<th>` instead of `<td>` ?

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [25 March 2023 12:16 UTC](https://discourse.nodered.org/t/getting-table-header-formatted-same-as-table-body/76922/3 "2023-03-25T12:16:13Z")

</div>

You can the give the table, tr, th, td a id or class and style using csss, this way you can target styling to individual td's/row's etc.  
e.g.

```auto
<style>
table#mytable_id {
  text-align: left; border: 2px solid white; width: 100%; font-size: small;
}
th#light {
  width:40%;
  color:orange;
  font-wieght: bold;
}
th#update {
  width:50%;
  color:orange;
  font-wieght: bold;
}
th#diff {
  width:10%;
  color:orange;
  font-wieght: bold;
}
td[id^="light"]{
  width:40%;
  color:white;
  font-wieght: bold;
}
td[id^="update"]{
  width:50%;
  color:red;
  font-wieght: bold;
}
td[id^="diff"]{
  width:10%;
  color:white;
  font-wieght: bold;
}
</style>
<div>
  <table id="mytable_id">
      <tr id="mytable_header">
        <th id="light">Lights/Plugs </th>
        <th id="update">last update</th>
        <th id="diff"">Diff</th>
      </tr>
      <tr id="mytable_row{{$index}}" ng-repeat="x in msg.payload">
        <td id="light{{$index}}">{{x.name}}</th>
        <td id="update{{$index}}">{{x.lasttime}}</th>
        <td id="diff{{$index}}">{{x.diff}}</th>
     </tr>
  </table>
</div>

```

---

<div class="post-metadata">

**Author:** ![haegar33](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/haegar33/32/38805_2.png) [@haegar33](https://discourse.nodered.org/u/haegar33)\
**Post date:** [25 March 2023 18:15 UTC](https://discourse.nodered.org/t/getting-table-header-formatted-same-as-table-body/76922/4 "2023-03-25T18:15:14Z")

</div>

Indeed the tables are too complex. I was not aware that you use the `ng-repeat`clause in **any** html tag. Thus the proposed change of @E1cid does the trick:

```auto
<div>
 <table width=100%>
    <tr style="color:orange">
        <th style="width:40%">Sensors</th>
        <th style="width:50%">last update</th>
        <th style="width:10%"">diff</th>
    </tr>
    <tr style="color: white" ng-repeat="x in msg.payload">
      <td style="width:40%">{{x.name}}</td>
      <td style="width:50%">{{x.lasttime}}</td>
      <td style="width:10%">{{x.diff}}</td>    
    </tr>
 </table>
</div>

```

Thanks!

---

<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:** [24 April 2023 18:15 UTC](https://discourse.nodered.org/t/getting-table-header-formatted-same-as-table-body/76922/5 "2023-04-24T18:15:19Z")

</div>

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