css - 在 HTML 中制作面向列的表格

Question

我正在尝试找出一种方法，将表格放入网页中，其中的列包含行(图 2)，而不是相反(图 1)。

由于 TR 标记，制作行包含列的表格很简单，但是没有相应的 TC 标记允许表格以相反的方式工作。

我确实找到了 this one, single, proposal到 W3C，但没有得到回应，似乎没有任何进展。

显然 W3C 认为它不值得实现，所以我正在尝试找出解决方法或其他方法来完成同样的事情。

(通用解决方案是理想的，但在我目前的情况下，我正在尝试有效地 fit a bunch of images of constant width 。)

图 1:三行，每行包含一些列:

图 2:三列，每列包含一些行:

Answer 1

当然，您可以使用通常的标记来实现此布局。但我不认为那是你所追求的。您想要以不同方式嵌套元素。

您可以使用 div 来实现这一点，最后的标记与表格标记一样经济。

<div class="table">
    <div class="column">
        <div class="row colspan2">

        </div>
        <div class="row"></div>
    </div>
    <div class="column">
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <div class="column">
        <div class="row"></div>
        <div class="row colspan2"></div>
    </div>
</div>

CSS 类需要一些修改才能正确处理。编辑:我尝试了 jsfiddle ，但尺寸是静态的，所以它不是很灵活。

CSS 是

.row{
    background-color:red;
    height: 50px;
    border: 1px black solid;
}
.column{
    width: 100px;
    height: 100px;
    text-align:left;
    float:left;
}
.table{
    height: 200px;
    float:left;
}

.colspan2{
    height: 100px;
}