Pull th content into a td data-label attribute

Answer 1

This small code jQuery copy attr "data-label" TH to TD

$('table th').each(function(i,elem) {
  var num = i + 1;
  $('table td:nth-child(' + num + ')').attr('data-label', $(elem).text());
});

Answer 2

Do you want the table to go from this:

| Account | Estimated arrival date | Amount | Period |
| ------- | ---------------------- | ------ | ------ |
|    1234 |             03/15/2001 |  $1.00 |    3rd |
|    1235 |             04/21/2002 | $12.00 |    4th |
|    4594 |             11/11/2011 | $45.00 |    2nd |

To this?:

-----------
Account: 1234
Estimated Arrival Date: 03/15/2001
Amount: $1.00
Period: 3rd
-----------
Account: 1235
Estimated Arrival Date: 04/21/2002
Amount: $12.00
Period: 4th
-----------
Account: 4594
Estimated Arrival Date: 11/11/2011
Amount: $45.00
Period: 2nd
-----------

UPDATE Try this code:

function toggle() {
  var table = document.querySelector('.my-table');
  table.classList.toggle('show-thin');
}

.table {
  border-collapse: collapse;
  display: inline-table;
}

.tr {
  display: table-row;
}

.th, .td {
  display: table-cell;
  border: 1px solid #555;
  padding: 3px 6px;
}

.th {
  background-color: #ffffd;
  font-weight: bold;
  text-align: center;
}

.td {
  text-align: right;
}

.my-table.show-thin {
  display: block;
}

.show-thin .tr {
  border-bottom: 1px solid black;
  display: block;
  margin-bottom: 2px;
  padding-bottom: 2px;
}

.show-thin .td {
  border: none;
  display: block;
  padding: 0;
  text-align: left;
}

.show-thin .td:before {
  content: attr(title) ':';
  display: inline-block;
  font-weight: bold;
  padding-right: 5px;
}

.show-thin .thin-hide {
  display: none;
}

<button onclick="toggle()">Toggle</button>
<hr/>
<div class="my-table">
<div class="tr thin-hide">
  <span class="th">Account</span>
  <span class="th">Estimated arrival date</span>
  <span class="th">Amount</span>
  <span class="th">Period</span>
</div>
<div class="tr">
  <span class="td" title="Account">1234</span>
  <span class="td" title="Estimated Arrival Date">03/15/2001</span>
  <span class="td" title="Amount">$1.00</span>
  <span class="td" title="Period">3rd</span>
</div>
<div class="tr">
  <span class="td" title="Account">1235</span>
  <span class="td" title="Estimated Arrival Date">04/21/2002</span>
  <span class="td" title="Amount">$12.00</span>
  <span class="td" title="Period">4th</span>
</div>
<div class="tr">
  <span class="td" title="Account">4594</span>
  <span class="td" title="Estimated Arrival Date">11/11/2011</span>
  <span class="td" title="Amount">$45.50</span>
  <span class="td" title="Period">2nd</span>
</div>
</div>

My example used a class to change the values from a tabular format to a lined format. But it can be done using a media query as well. This was just easier to demo.

The trick is in placing the title attribute on every cell. Then using CSS to show the title when in thin mode.

---

This shows what the table looks like in wide mode

---

And this shows what it is like in thin mode

---

When you look at the two images you will see that the standard table format uses the term "Estimated arrival date" with on the first work capitalized. The thin version uses "Estimated Arrival Date" with all words capitalized. This is to show that the values come from different places.

In the wide mode the header comes from here:

<div class="tr thin-hide">
  <span class="th">Account</span>
  <span class="th">Estimated arrival date</span>
  <span class="th">Amount</span>
  <span class="th">Period</span>
</div>

And in thin mode it comes from the title attribute.

This does not work if you try to use <table>, <tr>, <th> and <td> tags.

Answer 3

My solution with jQuery, seems to work (optional: I skip over any table cells with colspans):

    $('.myDiv table').each(function (index, value) {
    var headerCount = $(this).find('thead th').length;

    for (i = 0; i <= headerCount; i++) {
        var headerLabel = $(this).find('thead th:nth-child(' + i + ')').text();

        $(this).find('tr td:not([colspan]):nth-child(' + i + ')').replaceWith(
            function () {
                return $('<td data-label="' + headerLabel + '">').append($(this).contents());
            }
        );
    }

});