Column column one below the other

Question

I want to arrange the column tableone by one in a responsive way.

Here is the HTML:

<table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>A1</td>
    <td>B1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
  </tr>
  <tr>
    <td>A...</td>
    <td>B...</td>
  </tr>
</table>

Run code

+---------+-------------+
|    A    |    **B**    |
+---------+-------------+
|    A1   |    **B1**   |
+---------+-------------+
|    A2   |    **B2**   |
+---------+-------------+
|    A... |    **B...** |
+---------+-------------+

to

+-------------+
|      A      |
+-------------+
|      A1     |
+-------------+
|      A2     |
+-------------+
|      A...   |
+-------------+
|    **B**    |
+-------------+
|    **B1**   |
+-------------+
|    **B2**   |
+-------------+
|    **B...** |
+-------------+

and it SHOULD BE A TABLE. How can i achieve this?

How to make a media query understandable.

Also jQuery or native CSS will be fine.

Answer 1

You can achieve the desired structure by wrapping the table in a new way.

After that, a new row table can be set to

display: flex

and you can get the desired order by setting the order of each

td: fifth child (2n)

$('td').unwrap();
$('td').wrapAll('<tr></tr>');

tr {
display: flex;
flex-direction: column;
}

td:nth-child(2n) {
order: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>A1</td>
    <td>B1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
  </tr>
  <tr>
    <td>A...</td>
    <td>B...</td>
  </tr>
</table>

Run code

Answer 2

Creating tdas display:blockwill work, but will not matter row.

td{
  display:block
}

<table border=1 cellpadding=6 cellspacing=0>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>A1</td>
    <td>B1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
  </tr>
</table>

Run code

Answer 3

.table td {
  border: 1px solid;
  display: block;
}

<table class="table">
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>A1</td>
    <td>B1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
  </tr>
</table>

Answer 4

-

<table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>A1</td>
    <td>B1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
  </tr>
</table>

CSS

tr{
  display: flex;
  flex-direction: column;
}
table{
  display: flex:
  flex-direction: column;
}
td{
  border: 1px
}

Javascript

$(document).ready(function(){
    $fline = $('table tr td:first-child');
  $sline = $('table tr td:last-child');

  $('table').html('<tr></tr><tr></tr>');
  $fline.each(function(){
    $('table tr:first-child').append($(this));
  });
  $sline.each(function(){
    $('table tr:last-child').append($(this));
  });
});

Answer 5

This is one way to do this. You will need to use media queriesto change the layout for bending and reordering td, as well as jquery to wrap / expand elements tdfrom tr.

This will change when the window width is <480px.

var html = $('tbody').html();
var c = false;

$(window).on("resize", function() {
  if ($(window).width() < 480) {
    if (c == false) {
      $('td').unwrap()
      c = true;
    }
  } else {
    $('tbody').html(html)
    c = false;
  }
}).resize();

@media(max-width: 480px) {
  tbody {
    display: flex;
    flex-direction: column;
  }
  td:nth-child(2n + 1) {
    order: -1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A1</td>
      <td>B1</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>B2</td>
    </tr>
  </tbody>
</table>

Run code