CODEWITHSUNDEEP
htmlcss
John Crest
John Crest

Reputation: 261

css/html to display vertical table rows (or equivalent)

I'm looking for some help in trying to display my tabular data in a specific format:

column 1 | column 2 | column 3 | column 4 |
-------------------------------------------
1-1      | 2-1      | 3-1      | 4-1      |
-------------------------------------------
1-2      | 2-2      | 3-2      | 4-2      |
-------------------------------------------
1-3      | 2-3      | 3-3      | 4-3      |
-------------------------------------------

standard xhtml does not seem to be able to display it this way - the rows seem to go across instead of down - as in, the column numbers increase horizontally instead of vertically.

Is there any way the above layout can be achieved? It doesn't have to be tables - css with display types would be just as good.

Upvotes: 0

Views: 2405

Answers (2)

Maloric
Maloric

Reputation: 5605

I don't believe there is a way to do what you want using tables, but you can achieve a similar effect using correctly styled divs, like so:

HTML:

<div class="data">
    <div class="col">
        <div class="cell">
            1-1
        </div>
        <div class="cell">
            1-2
        </div>
        <div class="cell">
            1-3
        </div>
    </div>
    <div class="col">
        <div class="cell">
            2-1
        </div>
        <div class="cell">
            2-2
        </div>
        <div class="cell">
            2-3
        </div>
    </div>
    <div class="col">
        <div class="cell">
            3-1
        </div>
        <div class="cell">
            3-2
        </div>
        <div class="cell">
            3-3
        </div>
    </div>
</div>

CSS:

.col {float:left;}
.cell {height:50px; padding:10px; border:1px solid #ccc;}

JSFiddle example: http://jsfiddle.net/kj5Dd/

Drawbacks:

The above method does not enforce every row to align or to be the same height in the same way that table columns are aligned. That is why the .cell class has a fixed height. You could achieve this using javascript - looping through each row and calculating the max height for the first cell, the second cell and so on. You would then have to set the height for each cell sharing the same index.

Upvotes: 1

beautifulcoder
beautifulcoder

Reputation: 11320

Try wrapping each column around a div and set display:inline-block. The downside is you have to set each block to be of a fixed width and height.

http://jsfiddle.net/PZuZx/1/

Upvotes: 0

Related Questions