Need to design Horizontal tables

Question

i need to design table which will have dynamic data with n number of rows

normal format of table header on top and rows at bottom ... i need header on left and rows on right as below explained

Currently my table looks like below

i want to design it as below

[![

<table style="border:1px solid; text-align:center;">
  <thead>
      <th>header 1</th>
    <th>header 2</th>
    <th>header 3</th>
    </thead>
  <tbody>
    <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
      </tr>
    <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
      </tr>
    <tr>
    <td>Data 7</td>
    <td>Data 8</td>
    <td>Data 9</td>
      </tr>
    </tbody>
  
  <table>

]2]2

Answer 1

This should help you.

function swap( cells, x, y ){
   if( x != y ){     
   var $cell1 = cells[y][x];
   var $cell2 = cells[x][y];
   $cell1.replaceWith( $cell2.clone() );
   $cell2.replaceWith( $cell1.clone() );
    }
}

var cells = [];
$('tbody').find('tr').each(function(){
    var row = [];
    $(this).find('td').each(function(){
       row.push( $(this) );    
    });
    cells.push( row );
});

for( var y = 0; y <= cells.length/2; y++ ){
    for( var x = 0; x < cells[y].length; x++ ){
        swap( cells, x, y );
    }   
}

thead {
  float: left;   
}


thead th {
  display: block;   
}

tbody {
  float: right;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
   <thead>
    <th>header 1</th>
    <th>header 2</th>
    <th>header 3</th>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
    <tr>
      <td>Data 7</td>
      <td>Data 8</td>
      <td>Data 9</td>
    </tr>
    </tbody>
   
  <table>

Answer 2

You can use td and style the header part.

<style>
 td.header {
 font-weight: bold;
 }
</style>
<table>
  <tr>
    <td class="header">Header 1</td><td>Data 1</td><td>Data 2</td><td>Data 3</td>
  </tr>
</table>