Responsive table by columns

Question

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 1

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/

Answer 2

It's a little bit long work but the my main idea is to convert each column in a table and wrap it into a "main" table then use the maťo solution.

http://jsfiddle.net/kLmvwsp0/2/

---

HTML Page

<table align="center" style="width:50%">
  <colgroup>
    <col width="50%" />
  </colgroup>

  <!-- Group 1-->
  <td>
    <table align="center">
      <tbody>
        <tr>
          <td style="text-align: center;"><strong>Title 1</strong>
          </td>
        </tr>
        <tr>
          <td style="text-align: center;">Text 1</td>
        </tr>
      </tbody>
    </table>
  </td>

  <!-- Group 2-->
  <td>
    <table align="center">
      <tbody>
        <tr>
          <td style="text-align: center;"><strong>Title 2</strong>
          </td>
        </tr>
        <tr>
          <td style="text-align: center;">Text 2</td>
        </tr>
      </tbody>
    </table>
  </td>

</table>

<hr />

<table align="center" style="width:100%">
  <colgroup>
    <col width="35%" />
  </colgroup>

  <!-- Group 1-->
  <td>
    <table align="center">
      <tbody>
        <tr>
          <td style="text-align: center;"><strong>Title 1</strong>
          </td>
        </tr>
        <tr>
          <td style="text-align: center;">Text 1</td>
        </tr>
      </tbody>
    </table>
  </td>

  <!-- Group 2-->
  <td>
    <table align="center">
      <tbody>
        <tr>
          <td style="text-align: center;"><strong>Title 2</strong>
          </td>
        </tr>
        <tr>
          <td style="text-align: center;">Text 2</td>
        </tr>
      </tbody>
    </table>
  </td>

  <!-- Group 3-->
  <td>
    <table align="center">
      <tbody>
        <tr>
          <td style="text-align: center;"><strong>Title 3</strong>
          </td>
        </tr>
        <tr>
          <td style="text-align: center;">Text 3</td>
        </tr>
      </tbody>
    </table>
  </td>
</table>

CSS style sheet

/* 
Generic Styling, for Desktops/Laptops 
*/

table {
  width: 100%;
  border-collapse: collapse;
}
/* Zebra striping */

tr:nth-of-type(odd) {
  background: #eee;
}
th {
  background: #333;
  color: white;
  font-weight: bold;
}
td,
th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
}
@media all and (max-width: 500px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }
}

Answer 3

This is exactly what Bootstrap's Grid System is for, as Boostrap is designed to be mobile friendly. You can set up a document with code such as

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

And it will automatically resize for smaller screen sizes.