Though I am not aware of any component which will help you transpose your table but you can get this with some simple css and html.
Page:
<apex:page controller="TableTransposeController">
<style>
#transposeTable tr {
display: block;
float: left;
}
#transposeTable th,#transposeTable td {
display: block;
border-bottom-style: inset;
border-bottom-width: thin;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
border-left-style: outset;
}
#transposeTable th{
background: #f2f3f3;
font-weight: bold;
min-width:75px;
}
#transposeTable td{
background: white;
}
#transposeTable th:first-child,#transposeTable td:first-child{
border-top-style: outset;
border-top-width: thin;
}
</style>
<apex:pageBlock>
<table id="transposeTable">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
<apex:repeat value="{!allContacts}" var="c">
<tr>
<td>{!c.FirstName}</td>
<td>{!c.LastName}</td>
<td>{!c.Email}</td>
</tr>
</apex:repeat>
</table>
</apex:pageBlock>
</apex:page>
Controller:
public class TableTransposeController {
public List getallContacts() {
return [Select FirstNAme,LastName,Email from Contact limit 5];
}
}
Note: I have not handled horizontal overflow of this table as I believe this kind of representation is better suited when you have many fields to show for fewer records. e.g. When you compare two cell phone features side by side.
Apex
.