Pull th content into a td data-label attribute

Answer 1

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;
}

Toggle



  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.50
  2nd

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:

  Account
  Estimated arrival date
  Amount
  Period

And in thin mode it comes from the title attribute.

This does not work if you try to use