Simple table in template node aligning colums

I have a simple table and need to allign the columns. Can anybody tell me how?
Table looks like this:
afbeelding

I need 1st column left align, 2nd column right align and 3th column centered.

Template node looks like this:

<table id="table" border="1">
 <tr>
    <th colspan="3" >{{msg.title}}</th>
 <tr>
 <th>Omschrijving</th> 
 <th>Prijs</th>
 <th>Eenheid</th>
 </tr>
 <tbody>
 <tr ng-repeat="row in msg.payload">
 <td ng-repeat="item in row" >{{item}} </td>
 </tr>
 </tbody>
</table>

Hope somebody can tell me solution to this.

You could use css and give each column a id or class, here is a rough example

<style>
	#column0 {
		text-align:left;
	}
	#column1 {
		text-align:center;
		}
	#column2  {
		text-align:right;
	
	}
</style>

<table id="table" border="1">
 <tr>
    <th colspan="3" >{{msg.title}}</th>
 <tr>
 <th>Omschrijving</th> 
 <th>Prijs</th>
 <th>Eenheid</th>
 </tr>
 <tbody>
 <tr ng-repeat="row in msg.payload">
 <td ng-repeat="item in row" id="column{{$index}}">{{item}} </td>
 </tr>
 </tbody>
</table>
1 Like

@E1cid , thanks very much again for solution.
Quit simple even I can understand. This is good enough for me :slight_smile:

Here is result:

afbeelding

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