Style table so that th element is displayed above td element

[Tafalezono]

Hi, I've got a table looking something like this:

<table>
    <tr>
        <th scope="row">Heading1</th>
        <td>Content</td>
    </tr>
    <tr>
        <th scope="row">Heading2</th>
        <td>Content</td>
    </tr>
    <tr>
        <th scope="row">Heading3</th>
        <td>Content</td>
    </tr>
</table>

I would like the content to be displayed below the headings by only updating the style sheet. Is this possible?

[+virtorio MVC]

You could do some convoluted absolute positioning to force the locations of the cells, but you're really not using it right.

 

This is how <th> supposed to be used to do what you want:

 

<table border width="200">

  <tr>

    <th>header cell 1</th>

    <th>header cell 2</th>

  </tr>

  <tr>

    <td>cell 3</td>

    <td>cell 4</td>

  </tr>

</table>

Source: http://webdesign.about.com/od/htmltags/p/bltags_th.htm

[Starbuck84]

Not that I know of, but you're now defining a table row which contains a heading and data. You'll need a row with headings, and a row with data.

 

Something like this:

<table>
    <tr>
        <th scope="row">Heading1</th>
        <th scope="row">Heading2</th>
        <th scope="row">Heading3</th>
    </tr>
    <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
    </tr>
 </table>

[Tafalezono]

You could do some convoluted absolute positioning to force the locations of the cells

I am not allowed to make any changes to the html structure of the page, but can however make css changes. How could this be done by using convoluted absolute positioning?

[Tafalezono]

I figured it out myself. One can just use:

th, td {
 display:block;
}

[Seahorsepip Veteran]

Yeah tr float left and tr,td&th display block should do it