I need to automatically append data-* labels to td’s based on the content of their corresponding th. So, the result should something like this:

<table class="table">
<thead class="bg-gray-100">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Heading 1">table cell content</td>
<td data-label="Heading 2">table cell content</td>
<td data-label="Heading 3">table cell content</td>
<td data-label="Heading 4">table cell content</td>
<td data-label="Heading 5">table cell content</td>
</tr>
</tbody>
</table>

• While there are a number of jQuery solutions floating around, I need to accomplish this with pure css and html