Take a TR and force it to become vertical (like a list) using only CSS

Question

I have markup like this:

 <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
 </tr>

That obviously creates a horizontal table. Is is possible, using only CSS to make that table display with only 1 item on each row? The desired output is similar to a unordered list with no margin or bullet points.

Answer 1

I imagine this should do it:

tr, td { display: block; }

It'll probably break the table it's in though and it does seem like an odd thing to be doing.

Update: I can't get this (or any other technique) to work in IE8 (normal or compatibility mode). It just refuses to change the display of table cells. Very weird. Sorry, I have no workaround for this.

Answer 2

What I ended up doing is this:

HTML as above.

CSS:

td { width:100%; float:left; }

It is surprisingly simple, yet it works really well.

The root cause of this problem is that IE says that tr and td are already block so using block has no effect. IE has no knowledge of the table-row, table-cell and table display modes.