CODEWITHSUNDEEP
javascriptcsshtml-table
user3786942
user3786942

Reputation: 163

How to display html table single column into multiple columns?

I have a simple table with one big column. I want to display this single columns into multiple columns. Currently I have like as follows:

Column
a
a
a
a
a
a

I need something like:

      Column
a     a       a
a     a       a

My code is as follows:

<table>        
    <thead>Details</thead>
        <tbody>
        <tr>
            <td>a</td>
        </tr>

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

        <tr>
            <td>a</td>
        </tr>
        <tr>
            <td>a</td>
        </tr>
</tbody>
</table>

How I can do that without changing the table structure?

Jsfiddle: http://jsfiddle.net/wLjmpvuz/

Upvotes: 1

Views: 4469

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

To do this without changing the table structure as requested, you would need to use CSS that prevents normal table display and instead implements a “simulated table”. This can be done by turning the tr elements to inline blocks floated to the left but floating cleared after each three tr elements. This won’t work on old versions of IE. Example:

table {
  display: block;
}
tr {
   display: inline-block;
   float: left;
   border: solid 1px;
   width: 4em;
}
td {
   display: inline;
}
tr:nth-child(3n+1) {
   clear: left;
}

See jsfiddle. Note that such simulated tables have many limitations. You cannot let browsers allocate column widths (as there are no real columns); instead you need to set the element widths to create an impression of columns. You cannot make adjacent borders collapse as in a table, so setting borders is more work.

You could keep the HTML markup, but not the table structure, by using JavaScript code that constructs a new table element, with three cells in a row, cell contents taken from the original table, and then replaces the original table with the newly created one.

Upvotes: 2

Malav Shah
Malav Shah

Reputation: 143

I am not sure if this will solve your problem. http://jsfiddle.net/wLjmpvuz/8/

<table>        
<thead>Details</thead>
    <tbody>
    <tr>
        <td>a</td>
        <td>a</td>
         <td>a</td>
    </tr>
    <tr>
        <td>a</td>
        <td>a</td>
         <td>a</td>
    </tr>
    <tr>
        <td>a</td>
        <td>a</td>
         <td>a</td>
    </tr>
</tbody></table>

Upvotes: 0

Diego Farina
Diego Farina

Reputation: 339

Why you don't change table structure ? each is a new line. Try this

<table>        
    <thead>Details</thead>
        <tbody>
        <tr>
            <td>a</td>

            <td>a</td>

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

            <td>a</td>

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

            <td>a</td>

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

    </tbody></table>

Upvotes: 0

Hector Sanchez
Hector Sanchez

Reputation: 2317

You question is not as clear as water but if I understand you, you want a nested table

Something like this:

<table>        
    <thead>
        <th>Details</th>
        <th>Column2
        </th>
    </thead>
        <tbody>
        <tr>
            <td>
                <table>
                    <tbody>
                        <tr>
                            <td>a</td>
                            <td>a</td>
                            <td>a</td>
                        </tr>
                        <tr>
                            <td>a</td>
                            <td>a</td>
                            <td>a</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                Other Column Data
            </td>
        </tr>
    </tbody>
</table>

Fiddler: http://jsfiddle.net/wLjmpvuz/6/

In case you need just a flat table should be without the nested table:

<table>        
    <thead>Details</thead>
        <tbody>
        <tr>
            <td>a</td>
            <td>a</td>
            <td>a</td>
        </tr>
        <tr>
            <td>a</td>
            <td>a</td>
            <td>a</td>
        </tr>
    </tbody></table>

Fiddler: http://jsfiddle.net/wLjmpvuz/1/

Upvotes: 0

Related Questions