CSS Table to read left to right - css

Question

I do not have control over the markup on this table, only the CSS.
I'm looking to make the table read from left to right instead of the vertical.
http://jsbin.com/oXOYayA/1/edit
Any thoughts would be greatly appreciated. Thanks.

Answer 1

This works.
FIDDLE
body {
-webkit-transform: rotate(90deg);
}
table {
width: 100%;
border: none;
padding: 0;
margin-top: 100px;
-webkit-transform: scaleY(-1);
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
-webkit-transform: scaleY(-1);
}
table tr:first-child td {
background: #e9e9e9;
}
table tr td {
padding: 10px 5px 10px 5px;
text-align: center;
border: 1px solid #43447b;
-webkit-transform: rotate(-90deg);
height:60px;
}
Just make sure you replace body with whatever container holds the table to be flipped.

Answer 2

I'm not sure what you're asking. But you want the <th> on the bottom and <td> at the top?
You can mirror the table on the Y-axis and reset the mirror on the td so the text isn't mirrored:
table {
width: 100%;
border: none;
padding: 0;
margin-top: 28px;
-moz-transform: scaleY(-1); /* Gecko */
-o-transform: scaleY(-1); /* Operah */
-webkit-transform: scaleY(-1); /* webkit */
transform: scaleY(-1); /* standard */
}
table tr td {
padding: 10px 5px 10px 5px;
text-align: center;
border: 1px solid #43447b;
-moz-transform: scaleY(-1); /* Gecko */
-o-transform: scaleY(-1); /* Operah */
-webkit-transform: scaleY(-1); /* webkit */
transform: scaleY(-1); /* standard */
}
jsBin

Answer 3

Does it have to work in older browsers? For newer browsers I'd recommend rotating the table 90deg counter-clockwise using CSS3 transforms and then rotate the cells back the other way.
http://jsbin.com/oXOYayA/5/edit
Works best if all cells are square (that's why i set explict width/height on the TDs
EDIT: Actually, if you combine my answer with nkmols it can be done: http://jsbin.com/oXOYayA/7/edit
The trick is to combine the transforms
transform: rotate(-90deg) scaleX(-1);
It rotates part of the table out of view but you can fix that easily enough by setting a pivot point for the transform.

Answer 4

I know you said you can't change the markup but I have used < thead > < tbody > tags. In your case, just use class names to replace the thead and tbody tags.
Fiddle: http://jsfiddle.net/jennift/aCs7c/
For the table:
<table border="0">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>188</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>211</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
And the css:
table {
border-collapse: collapse;
border-spacing: 0;
position: relative;
}
thead {
display: block;
float: left;
}
tbody {
display: block;
position: relative;
overflow-x: auto;
white-space: nowrap;
}
thead tr {
display: block;
}
th {
display: block;
text-align: right;
border:1px solid #000;
}
tbody tr {
display:inline-block;
vertical-align: top;
float:left;
}
td {
display: block;
text-align: left;
border:1px solid #000;
}
/*fix your borders*/
you can also refer to http://elvery.net/demo/responsive-tables/