Question

I have the HTML structure like this:

<table border="1">
<tbody>
    <tr>
        <td>header1</td><td>header2</td><td>header3</td>
    </tr>
    <tr>
        <td>1</td><td>2</td><td>3</td>
    </tr>
    <tr>
        <td>11</td><td>22</td><td>33</td>
    </tr>

</tbody>

How could I use CSS so that this table have vertical row layout like this (vertical record and header):
http://pastebay.net/1181219

Btw is it possible to re-define the HTML structure so that the problem could be easy to be solved? I hope I can solve using CSS instead of JavaScript.

Answer 1

HTML

<table id="mytable">
    <tr>
        <th> Header 1

        <td> L1 C2
        <td> L1 C3
        <td> L1 C4

    <tr>
        <th> Header 2

        <td> L2 C2
        <td> L2 C3
        <td> L2 C4

    <tr>
        <th> Header 3

        <td> L3 C2
        <td> L3 C3
        <td> L3 C4
</table>

CSS

#mytable tr > th{
    background:#69B;
    color:#FFF;
}