Full column for table in CSS

Question

Is there a way in CSS for stacking an entire column, so if my table was as follows:

| H1 | H2 | H3 | H4 |
| A1 | B1 | C1 | D1 |
| A2 | B2 | C2 | D2 |

This would turn into this for mobile devices:

| H1 |
| A1 |
| A2 |
| H2 |
| B1 |
| B2 |
| H3 |
| C1 |
| C2 |
| H4 |
| D1 |
| D2 |

Hope this makes sense

Here is my html structure:

    <table class="rds-table">
    <tr>
        <th>H1</th>
		<th>H2</th>
		<th>H3</th>
		<th>H4</th>
	</tr>
    <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
    </tr>
	<tr>
		<td>A2</td>
		<td>B2</td>
		<td>C2</td>
	    <td>D2</td>
	</tr>
	<tr>
		<td>A3</td>
		<td>B3</td>
		<td>C3</td>
		<td>D3</td>
	</tr>
</table>

Run codeHide result

Answer 1

.column {
    float:left;
}

.element {
    display: block;
    float:left;
    clear:both;
}

@media (max-width: 980px) {
    .column {
        clear:both;
    }
}


<div class="rds-table">
    <div class="column">
        <div class="element">Header One</div>
        <div class="element">Data One</div>
        <div class="element">Data One</div>
    </div>
    <div class="column">
        <div class="element">Header Two</div>
        <div class="element">Data Two</div>
        <div class="element">Data Two</div>
    </div>
</div>

The media query will search for a screen size of 980 or lower. Edit: code has now been updated, this will use divs instead of table elements.

Answer 2

In your css, use @media to request screen size and organize content in a flexible layout.

$(window).on('resize', function() {
  myfunction();
});
$(document).ready(function() {
  $(window).trigger('resize');
});

function myfunction() {
  if (window.matchMedia('(max-width: 880px)').matches) {
    if (!$(".th").length) {
      $(".rds-table tbody").children().each(function(index) {
        console.log(index + ": " + $(this).prop("tagName"));
        if (index > 0) { //si nos brincamos el header y vamos a los demás tr

          $(this).prepend('<td class="th">' + $(".rds-table tr th:nth-child(" + index + ")").text() + '</td>');
          $(".rds-table tr th:nth-child(" + index + ")").addClass("invisible");

        }
      });
    }
  } else {

    /*       $(".th").addClass("invisible");*/
    $(".th").remove();
    $(".invisible").removeClass("invisible");
  }
}

    @media (max-width: 880px) {

      td {

        display: flex;

      }

    }

    .th {

      color: blue;

    }

    .invisible {

      display: none;

    }

    th,

    td {

      border: 1px;

      border-style: dashed;

      border-color: gray;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="rds-table">
  <tr>
    <th>Header One</th>
    <th>Header Two</th>
    <th>Header Three</th>
    <th>Header Four</th>
  </tr>
  <tr>
    <td>Data One H1</td>
    <td>Data Two H1</td>
    <td>Data Three H1</td>
    <td>Data Four H1</td>
  </tr>
  <tr>
    <td>Data One H2</td>
    <td>Data Two H2</td>
    <td>Data Three H2</td>
    <td>Data Four H2</td>
  </tr>
  <tr>
    <td>Data One H3</td>
    <td>Data Two H3</td>
    <td>Data Three H3</td>
    <td>Data Four H3</td>
  </tr>
  <tr>
    <td>Data One H4</td>
    <td>Data Two H4</td>
    <td>Data Three H4</td>
    <td>Data Four H4</td>
  </tr>
</table>

Run codeHide result

, , JQuery, css, ( ).