css/html用于显示垂直表行(或等效项)

Question

我正在寻找一些帮助，以尝试以特定格式显示我的表格数据：

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

标准的xhtml似乎不能以这种方式显示它-行似乎是交叉的，而不是向下的-就像在中一样，列数水平增加而不是垂直增加。

有没有办法实现上面的布局？它不一定非得是表格--带有显示类型的css也一样好。

Answer 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来实现这一点-循环遍历每一行，并计算第一个单元格、第二个单元格等的最大高度。然后，您必须为共享相同索引的每个单元格设置高度。

Answer 2

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

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