title: Display Table with heading in Nativescript
body: <p>I have been trying to display a table in my nativescript mobile application,i got the output but the user interface is not as expected.</p>
  <p>My .html file:</p>
  <pre><code>&lt;ScrollView&gt;
   &lt;StackLayout *ngIf=&quot;this.bool&quot;&gt;
    &lt;GridLayout columns=&quot;17*,16*,12*,16*,7*,20*,12*&quot; rows=&quot;auto&quot;&gt;
     &lt;Label text=&quot;Start Time&quot; col=&quot;1&quot; row=&quot;0&quot; &gt;&lt;/Label&gt;
     &lt;Label text=&quot;End Time&quot; col=&quot;3&quot; row=&quot;0&quot;&gt;&lt;/Label&gt;
     &lt;Label text=&quot;Period&quot; col=&quot;5&quot; row=&quot;0&quot; margin-top=&quot;50&quot;&gt;&lt;/Label&gt;
    &lt;/GridLayout&gt;
   &lt;template *ngFor=&quot;let col of this.rows; let i=index&quot;&gt;
    &lt;GridLayout columns=&quot;11*,14*,1*,14*,14*,1*,14*,20*,10*,11*&quot; rows=&quot;auto&quot;&gt;
     &lt;TextField [(ngModel)]=&quot;col.Start_Hour&quot; col=&quot;1&quot; row=&quot;0&quot; &gt;&lt;/TextField&gt;
     &lt;Label text=&quot;:&quot; col=&quot;2&quot; row=&quot;0&quot; &gt;&lt;/Label&gt;
     &lt;TextField [(ngModel)]=&quot;col.Start_Minute&quot; col=&quot;3&quot; row=&quot;0&quot; &gt;&lt;/TextField&gt;
  
     &lt;TextField [(ngModel)]=&quot;col.End_Hour&quot; col=&quot;4&quot; row=&quot;0&quot; &gt;&lt;/TextField&gt;
     &lt;Label text=&quot;:&quot; col=&quot;5&quot; row=&quot;0&quot; ng-readonly=&quot;checked&quot;&gt;&lt;/Label&gt;
     &lt;TextField [(ngModel)]=&quot;col.End_Minute&quot; col=&quot;6&quot; row=&quot;0&quot;&gt;&lt;/TextField&gt;
  
     &lt;TextField [(ngModel)]=&quot;col.Subject_Id&quot; col=&quot;7&quot; row=&quot;0&quot;&gt;&lt;/TextField&gt;
     &lt;StackLayout (tap)=&quot;remove(i)&quot; col=&quot;8&quot; row=&quot;0&quot;&gt;&lt;Image src=&quot;~/images/minus.png&quot; height=&quot;30&quot; width=&quot;30&quot; col=&quot;3&quot; row=&quot;0&quot;&gt;&lt;/Image&gt;&lt;/StackLayout&gt;
    &lt;/GridLayout&gt;
   &lt;/template&gt;
   &lt;/StackLayout&gt;
  &lt;/ScrollView&gt;
  </code></pre>
  <p>ans my .ts file contains an array:</p>
  <pre><code>this.rows=[{
  &quot;End_Minute&quot;: &quot;28&quot;,
  &quot;Class_Id&quot;: &quot;1000&quot;,
  &quot;End_Hour&quot;: &quot;13&quot;,
  &quot;Start_Hour&quot;: &quot;11&quot;,
  &quot;Sequence&quot;: &quot;1&quot;,
  &quot;Start_Minute&quot;: &quot;19&quot;,
  &quot;Subject_Id&quot;: &quot;300&quot;
  }, {
  &quot;End_Minute&quot;: &quot;36&quot;,
  &quot;Class_Id&quot;: &quot;1000&quot;,
  &quot;End_Hour&quot;: &quot;28&quot;,
  &quot;Start_Hour&quot;: &quot;10&quot;,
  &quot;Sequence&quot;: &quot;1&quot;,
  &quot;Start_Minute&quot;: &quot;28&quot;,
  &quot;Subject_Id&quot;: &quot;3000&quot;
  }, {
  &quot;End_Minute&quot;: &quot;30&quot;,
  &quot;Class_Id&quot;: &quot;1000&quot;,
  &quot;End_Hour&quot;: &quot;12&quot;,
  &quot;Start_Hour&quot;: &quot;11&quot;,
  &quot;Sequence&quot;: &quot;3&quot;,
  &quot;Start_Minute&quot;: &quot;10&quot;,
  &quot;Subject_Id&quot;: &quot;3000&quot;
  }, {
  &quot;End_Minute&quot;: &quot;15&quot;,
  &quot;Class_Id&quot;: &quot;1000&quot;,
  &quot;End_Hour&quot;: &quot;12&quot;,
  &quot;Start_Hour&quot;: &quot;11&quot;,
  &quot;Sequence&quot;: &quot;4&quot;,
  &quot;Start_Minute&quot;: &quot;13&quot;,
  &quot;Subject_Id&quot;: &quot;300&quot;
  }]
  </code></pre>
  <p>the output I am getting is :
  <a href="https://i.stack.imgur.com/aBqzm.png" rel="nofollow noreferrer">Click here to view image</a></p>
  <p>I have a doubt that why is that colon (:) going above in the row and why am I getting spaces between the textfield and the colon?
  can anyone please help me out with this</p>