HTML - 按列写表 [英] HTML - 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.

例如：

For example:

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

CSS:

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

请参阅jsfiddle here： 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.

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