15

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.

Jaroslav Klimčík
  • 4,548
  • 12
  • 39
  • 58
  • can you please convert the inline styles to css and update the fiddle – andrew Sep 28 '14 at 22:25
  • In order to accomplish this you'll have to change the structure of your markup – Danield Sep 28 '14 at 22:30
  • As the table in this case doesn't have different types of columns, consider also this solution with adaptive multi-column list: [How to display list items as columns?](https://stackoverflow.com/questions/12332528/how-to-display-list-items-as-columns) – Vadzim Dec 14 '18 at 14:50

5 Answers5

15

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/

maťo
  • 1,225
  • 8
  • 16
  • This breaks things for screen-readers and in the tree: https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/ . This script can help: http://adrianroselli.com/2018/05/functions-to-add-aria-to-tables-and-lists.html –  Feb 09 '19 at 04:06
3

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;
  }
}
FeRRi
  • 31
  • 1
1

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.

Aeolingamenfel
  • 2,399
  • 1
  • 15
  • 22
0

The best way to do this would be with divs and using CSS' display: table, display: table-row and display: table-cell properties, along with some breakpoints. Otherwise, you're going to have a lot of ugly code. This isn't the semantically greatest solution, but as far as responsive goes, it does work.

See this excellent article for more help: http://css-tricks.com/almanac/properties/d/display/.

Ian
  • 5,704
  • 6
  • 40
  • 72
0

it's not very nice, but you can try to make tr tags columns and td tag rows

tr{
    display: inline;
    float:left;
}

td{
   display: block;
}
Michal Vašut
  • 187
  • 2
  • 8