title: Display a table based on an array without using table elements but using display properties
body: <p>Hi I have created a table using display properties, now i have an array and i want to iterate through that array and pring the value of column and rows, here is my code : -
  html:= </p>
  
  <pre><code>&lt;div id='table'&gt;
    &lt;!-- table head --&gt;
    &lt;div id="thead"&gt;
  &lt;div class="table-row"&gt;
    &lt;div class="table-cell"&gt;head 1&lt;/div&gt;
    &lt;div class="table-cell"&gt;head 2&lt;/div&gt;
  &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- table body --&gt;
      &lt;div id="tbody"&gt;
        &lt;div class="table-row"&gt;
          &lt;div class="table-cell"&gt;cell 1.1&lt;/div&gt;
          &lt;div class="table-cell"&gt;cell 1.2&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="table-row"&gt;
          &lt;div class="table-cell"&gt;cell 2.1&lt;/div&gt;
          &lt;div class="table-cell"&gt;cell 2.1&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- table foot --&gt;
      &lt;div id="tfoot"&gt;
        &lt;div class="table-row"&gt;
          &lt;div class="table-cell"&gt;foot 1&lt;/div&gt;
          &lt;div class="table-cell"&gt;foot 2&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- table end --&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>div {
           padding: 5px;
        }
    #table {
      margin: 0 auto;
      display: table;
      border: 1px solid green;
    }
  
    .table-row {
      display: table-row;
    }
  
    .table-cell {
      width: 150px;
      text-align: center;
      display: table-cell;
      border: 1px solid black;
    }
  
    #thead {
      display: table-header-group;
      color: white;
      background-color: red;
    }
  
    #tbody {
      display: table-row-group;
      background-color: yellow;
    }
  
    #tfoot {
      display: table-footer-group;
      color: white;
      background-color: blue;
    }
  </code></pre>
  
  <p>ts file :=</p>
  
  <pre><code>auditViews : any = [
  {
    "id" : "log1",
    "name" : "Audit log 1",
    "description" : "Descrition of audit log 1",
    "status" : "active"
  },
  {
    "id" : "log2",
    "name" : "Audit log 2",
    "description" : "Descrition of audit log 2",
    "status" : "active"
  },
  {
    "id" : "log3",
    "name" : "Audit log 3",
    "description" : "Descrition of audit log 3",
    "status" : "active"
  }];
  </code></pre>
  
  <p>This is static, somehow i need the column header be id, name, description and status and below that the values.</p>