CODEWITHSUNDEEP
javascriptjqueryhtmlcss
siva636
siva636

Reputation: 16451

Displaying table data into horizontal alignment

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)

Upvotes: 2

Views: 9089

Answers (2)

Kalle H. Väravas
Kalle H. Väravas

Reputation: 3615

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;}

Upvotes: 1

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175098

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

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

Note that IE won't particulary like that.

Upvotes: 2

Related Questions