i need to copy the corresponding from table header entry to their table cell attr data-label in pure css. i dont need jquery.
i tried below in jquery. but i need in css example. Please give some example in pure html and css.
var $th = $("thead th");
var $tr = $("tbody tr");
$tr.each(function(){
$(this).find('td').each(function(index){
$(this).attr('data-label', $th.eq(index).text());
});
});
New contributor
karthick balakrishnan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2
This should work for you. It uses the content: attr(data-label) ": " . You can simply set the data-label attibute on every td
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
td:before {
content: attr(data-label) ": ";
font-weight: bold;
}<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Header 1">Row 1, Cell 1</td>
<td data-label="Header 2">Row 1, Cell 2</td>
<td data-label="Header 3">Row 1, Cell 3</td>
</tr>
<tr>
<td data-label="Header 1">Row 2, Cell 1</td>
<td data-label="Header 2">Row 2, Cell 2</td>
<td data-label="Header 3">Row 2, Cell 3</td>
</tr>
</tbody>
</table>
</body>2