Need to design Horizontal tables - html

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>