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/

css / html显示垂直表行（或等效行）

2 个答案: