Jaroslav Klimčík Jaroslav Klimčík - 1 month ago 9
CSS Question

Responsive table by columns

I have a table with four columns and I need to have a responsive table where each column will be below the other but I don't know how to do it. I hope that there is some answer without using Javascript.

Now I have a table like this:

+---------------+
| Some text |
+---------------+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+


And I need to get this result in smaller resolution:

+-----------+
| Some text |
+-----------+
| A |
+-----------+
| A |
+-----------+
| A |
+-----------+
| A |
+-----------+
| B |
+-----------+
| B |
+-----------+
| B |
+-----------+
| B |
+-----------+
| B |
+-----------+


And so on. Is it somehow possible? Here is my JSfiddle. Also the answer in jsfiddle would be best.

Answer

Table have a problem with responsivity, because table datas are written by lines, so data in code looks thus: A, B, C, D, A, B, C, D... not A, A, A, A, B, B, B, B...

So you not get output with datas in the right order.

If you use media query, output looks thus:

@media all and (max-width:500px){
    table{
        width:100%;
    }

    td{
        display:block;
        width:100%;
    }

    tr{
        display:block;
        margin-bottom:30px;
    }
}

http://jsfiddle.net/sjdjrm8m/


You need convert your table to this enrollment:

HTML:

<table>
            <tr>
            <td colspan="2">Some title</td>
        </tr>
    <tr>
        <td>

<table>
    <tbody>

        <tr>
            <td style="text-align: center; background-color: #e8e8e8;">&nbsp;<span style="color: #1e2a64;"><strong>Title</strong></span>

            </td>
        </tr>
        <tr>
            <td style="text-align: center; background-color: #efedee;">
                <div class="circle"><strong>40.000</strong>  <sup>eur</sup>

                    <br>month</div>
            </td>
        </tr>
        <tr>
            <td style="text-align: center; background-color: #f5f5f5;">&nbsp;<strong>Text</strong>

                <p></p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
            </td>
        </tr>
        <tr style="height: 70px;">
            <td style="text-align: center; background-color: #f5f5f5; vertical-align: middle;">
                <input id="kontakt_btn" type="button" value="contact">
            </td>
        </tr>


    </tbody>
 </table>
    </td><td>
<table>
    <tr>
        <td style="text-align: center; background-color: #dedcdd;"><strong>&nbsp;<span style="color: #1e2a64;">Title2</span></strong>

            </td>
    </tr>
    <tr>
            <td style="text-align: center; background-color: #efedee;">
                <div class="circle"><strong>40.000</strong>  <sup>eur</sup>

                    <br>month</div>
            </td>
        </tr>
        <tr>
            <td style="text-align: center; background-color: #f5f5f5;">&nbsp;<strong>Text</strong>

                <p></p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
            </td>
        </tr>
        <tr style="height: 70px;">
            <td style="text-align: center; background-color: #f5f5f5; vertical-align: middle;">
                <input id="kontakt_btn" type="button" value="contact">
            </td>
        </tr>


    </tbody>
</table>

CSS:

@media all and (max-width:500px){
    table{
        width:100%;
    }

    td{
        display:block;
        width:100%;
    }

    tr{
        display:block;
        margin-bottom:30px;
    }

    tr tr{
        margin-bottom:0;
    }
}

http://jsfiddle.net/9yefftan/