How to make TD behaving like TR(row) with CSS?

Question

I have a component that create dynamically html table. According to my need, I need to show td tags line by line as a block element not like column. How to do that by using

Answer 1

you can use colspan attribute

<tr>
<td colspan="2">some content</td>
</tr>

this will make a cell that spans two columns

Answer 2

i am not sure this your expecting solution.

Please check this out : http://jsfiddle.net/thilakar/mPdd7/2/

Answer 3

You can do this by applying display: block to the tds:

http://jsfiddle.net/wYA9K/

That works in all modern browsers except IE9..

Using float: left; width: 100% instead makes it also work in IE8/9:

http://jsfiddle.net/gvpzh/

Nothing will make it work in IE7.

Answer 4

Try this:

td{
    display: table-row
}

Answer 5

You can use the display: block css property as shown in this fiddle