0

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.

4

2 回答 2

1

我不相信有一种方法可以使用表格来做你想做的事，但你可以使用正确样式的 div 来实现类似的效果，如下所示：

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 示例：http: //jsfiddle.net/kj5Dd/

缺点：

上述方法并不强制每行对齐或以与表格列对齐的相同方式具有相同的高度。这就是.cell类有固定高度的原因。您可以使用 javascript 来实现这一点 - 循环遍历每一行并计算第一个单元格、第二个单元格等的最大高度。然后，您必须为共享相同索引的每个单元格设置高度。

于 2013-09-19T12:58:19.643 回答
0

尝试将每一列包裹在 adiv和 set周围display:inline-block。缺点是您必须将每个块设置为固定width和height.

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

于 2013-09-19T13:13:38.383 回答