[Solved] Write a table by column [closed]

by


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:

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

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

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

solved Write a table by column [closed]