JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<table>
<tr>
<th>Name
</th>
<td>Pavel Jack</td>
</tr>
<tr>
<th>ID</th>
<td>202930475 1</td>
<th>Birthdate</th>
<td>889059/5769</td>
</tr>
<tr>
<th>E-mail</th>
<td>[email protected]</td>
<th>Telephone</th>
<td>609 409 494</td>
</tr>
<tr>
<th>Employer</th>
<td> Finance</td>
<th>Position</th>
<td>Operátor</td>
</tr>
<tr>
<th>Income</th>
<td>18 999</td>
<th>Address</th>
<td>Pařížská 12, Praha 1</td>
</tr>
</table>
CSS
table {
text-align: left;
width: 100%;
border: 1px solid #3F434E;
padding: 10px 10px;
box-sizing: border-box;
border-radius: 5px;
margin-bottom: 20px
}
td {
padding: 9px 24px 0px;
}
th {
padding-right: 10px;
position: relative;
cursor: pointer;
}
th div {
position: absolute;
background: rgba(255, 255, 255, 0.98);
color: white;
box-shadow: 0px 0px 10px black;
padding: 1px;
box-sizing: border-box;
border-radius: 5px;
z-index: 99;
font-size: 1.7em;
width: 100%;
text-align: center;
}
th div a:first-of-type {
margin-right: 20px;
}
.good {
color: #84e07c;
}
.verybad {
color: #e07ccd;
}
JavaScript
var $rate = $('<div><a href="" class="fa fa-check-circle good"></a><a href="" class="fa fa-times-circle bad"></a></div>');
$(document).on("click", "a", function(e) {
e.preventDefault();
});
$("th").on("click", function() {
$(this).append($rate).fadeIn(50);
});
$(document).on("click", ".good", function() {
$(this).closest("th").addClass("good");
});
$(document).on("click", ".bad", function() {
$(this).closest("th").addClass("verybad");
});