Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
</style>
</head>
<body>
<table style="width:100%; border-width:20px;">
<tr><td>
  <table style="width:100%; border-width:17px;">
<tr><td>
<table style="width:100%; border-width:15px; ">
<div>
  <tr>
    <td>Jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  <tr >
    <td>Eve</td>
    <td id='Jackson'>Jackson</td>       
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
</div>
</table>
</td></tr>
</table>
  
</td></tr>
</table>
</body>
</html>
 
function getPosition(e) {
        var isNotFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') == -1;
        var x = 0;
        var y = 0;
        while(e) {
          x += (e.offsetLeft - e.scrollLeft);
          y += (e.offsetTop - e.scrollTop);
          if (isNotFirefox) {
            x += e.clientLeft;
            y += e.clientTop;
          }
          e= e.offsetParent;
        }
        return { x: x, y: y};
    }
var e = document.getElementById('Jackson');
var pos = getPosition(e);
var shape = e.getBoundingClientRect();
var box = document.createElement('div');   
    box.style.cssText = 'position: absolute; left: ' + pos.x + 'px; top: ' + pos.y + 'px; width: ' + shape.width + 'px; height: ' + shape.height + 'px; z-index: 99999; border: solid 1px red; pointer-events:none;';
    document.body.appendChild(box);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers