Getting table header formatted same as table body

[haegar33]

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

<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:

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

[hotNipi]

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> ?

[E1cid]

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.

<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>

[haegar33]

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

<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!