JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<thead>
<tr>
<td></td>
<td>Name</td>
<td>Last</td>
<td>DOB</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type=checkbox /></td>
<td>Blah</td>
<td>Blah</td>
<td>1/1/11</td>
</tr>
<tr>
<td><input type=checkbox /></td>
<td>Blah</td>
<td>Blah</td>
<td>1/1/11</td>
</tr>
<tr>
<td><input type=checkbox /></td>
<td>Blah</td>
<td>Blah</td>
<td>1/1/11</td>
</tr>
<tr>
<td><input type=checkbox /></td>
<td>Blah</td>
<td>Blah</td>
<td>1/1/11</td>
</tr>
<tr>
<td><input type=checkbox /></td>
<td>Blah</td>
<td>Blah</td>
<td>1/1/11</td>
</tr>
<tr>
<td><input type=checkbox /></td>
<td>Blah</td>
<td>Blah</td>
<td>1/1/11</td>
</tr>
<tr>
<td><input type=checkbox /></td>
<td>Blah</td>
<td>Blah</td>
<td>1/1/11</td>
</tr>
<tr>
<td><input type=checkbox /></td>
<td>Blah</td>
<td>Blah</td>
<td>1/1/11</td>
</tr>
<tr>
<td><input type=checkbox /></td>
<td>Blah</td>
<td>Blah</td>
<td>1/1/11</td>
</tr>
<tr>
<td><input type=checkbox /></td>
<td>Blah</td>
<td>Blah</td>
<td>1/1/11</td>
</tr>
</tbody>
</table>
CSS
table {
border-collapse: collapse;
}
table td {
border: 1px solid black;
padding: 5px;
}
JavaScript
$(function() {
var $table = $("table");
var $tbody = $table.find("tbody");
var offset = $tbody.offset();
var height = offset.top;
$table.find("tbody tr").each(function() {
var trHeight = $(this).outerHeight();
createMarker(trHeight);
height += trHeight;
});
function createMarker(h) {
var $marker = $("<div/>", {
css: {
position: "absolute",
top: height + "px",
height: h + "px",
width: "25px",
"background-color": "red",
"border": "1px solid blue"
}
});
$("body").append($marker);
}
});