Question

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)

Answer 1

This is your example table right?

http://jsfiddle.net/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.net/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.net/hobobne/h8AZJ/4/

tr {display: inline-block;}

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

http://jsfiddle.net/hobobne/h8AZJ/5/

tr {float: left;}