How to display html table single column into multiple columns?

Question

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/

two rows <tr> each one having three cells <td>. That's the answer. — Hashem Qolami
– Hashem Qolami, Commented Sep 25, 2014 at 20:25
adding more td's to each tr or what? jsfiddle.net/wLjmpvuz/1 — Hector Sanchez
– Hector Sanchez, Commented Sep 25, 2014 at 20:25

Jukka K. Korpela · Accepted Answer · 2014-09-25 20:43:24Z

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.

Hector Sanchez · Accepted Answer · 2014-09-25 20:29:54Z

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/

Diego Farina · Accepted Answer · 2014-09-25 20:30:26Z

0

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>

answered Sep 25, 2014 at 20:30

Diego Farina

3392 silver badges11 bronze badges

Comments

Malav Shah · Accepted Answer · 2014-09-25 20:33:50Z

0

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>

answered Sep 25, 2014 at 20:33

Malav Shah

1432 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to display html table single column into multiple columns?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related