按列写表 [英] Write a table by column

问题描述

如何在HTML中按列而不是按行编写表?是否有可能?据我所知，标准方法是按行的:

How can I write a table by column and not by row in HTML? Is it possible? As I know the standard method is by row like this:

<tr>
   <td></td>
</tr>

推荐答案

HTML表被标准化为从左到右，从上到下定义.因此，执行您要求的唯一方法是使用不同的DOM结构重新创建表.

HTML tables are standardized to be defined left-to-right, top-to-bottom. Thus, the only way to do what you're asking is to reinvent the table using a different DOM structure.

例如:

<div class="table">
    <div class="column">
        <div class="cell">Cell1</div>
        <div class="cell">Cell2</div>
        <div class="cell">Cell3</div>
        <div class="cell">Cell4</div>
    </div>
    <div class="column">
        <div class="cell">Cell5</div>
        <div class="cell">Cell6</div>
        <div class="cell">Cell7</div>
        <div class="cell">Cell8</div>
    </div>
    <div class="column">
        <div class="cell">Cell9</div>
        <div class="cell">Cell10</div>
        <div class="cell">Cell11</div>
        <div class="cell">Cell12</div>
    </div>
</div>

CSS:

.table {
    float: left;
}
.column {
    float: left;
}
.cell {
    float: left;
    clear: left;
    border: 1px black solid;
    margin: 2px;
    padding: 2px;
}

在此处查看jsfiddle: http://jsfiddle.net/9ky816ts/

See jsfiddle here: http://jsfiddle.net/9ky816ts/

注意:样式不是完美的，但是人们总是可以使用它.你明白了.

Note: the styling isn't perfect, but one can always play with it. You get the point.

这篇关于按列写表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！