I have a table of 1 column and say 5 rows.

The (data in the) rows are displayed one bellow another (vertically) in the table by default.

I want to display these data (in the table) in a horizontal alignment using CSS and / or javascript. (table of column 1 and rows 5 must remain the same)

I have a table of 1 column and say 5 rows.

The (data in the) rows are displayed one bellow another (vertically) in the table by default.

I want to display these data (in the table) in a horizontal alignment using CSS and / or javascript. (table of column 1 and rows 5 must remain the same)

• javascript
• jquery
• html
• css

• Is there any reason you can't have 1 row and 5 columns? Or instead of a table use divs with float: left? – John Commented Aug 8, 2011 at 18:01
• Yes, I have reasons not to change the table markup. I just to want to display the same table in a horizontal view. – siva636 Commented Aug 8, 2011 at 18:19

2 Answers 2

Try this: http://jsfiddle/RikudoSennin/YPvxP/

#table tr, #table td {
    display: inline-block;
}

Note that IE won't particulary like that.

This is your example table right?

http://jsfiddle/hobobne/h8AZJ/

<table>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
</table>

And you want them to be horizontally?

http://jsfiddle/hobobne/h8AZJ/1/

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
</table>

But if you must use <tr>'s and cant change the structure, then using display: inline-block; is not the best solution. First of all, you need special fix for ie7, when using inline-block and also it will leave spaces.

http://jsfiddle/hobobne/h8AZJ/4/

tr {display: inline-block;}

Using float: left; is your best bet, as far as browser patibility goes. Also leaves no spaces, but you must put <br style="clear: both;" /> after </table>.

http://jsfiddle/hobobne/h8AZJ/5/

tr {float: left;}