How can i get a td by clicking if it has previous td's overflowed text

Question

If a click is made on the second td which has overflow text of previous td , the handler is returning the first td as the text belongs to first td . Instead of that i need to select the second td irrespective of the overflow text it has. Thanks in advance.

Play with: https://jsfiddle.net/zvbLz2n3/

Answer 1

I think instead of setting the attribute to true all the time you have to set it to false on blur and you need to set the css property position:relative; to the td :

 $(function() { $('td').on({ click: function() { $(this).attr('contenteditable', 'true').focus(); }, blur: function() { $(this).attr('contenteditable', 'false'); } }); }); 

 table { border-collapse: collapse; table-layout: fixed; width: 500px; } td { border: 2px solid black; -webkit-user-select: none; width: 25%; height: 20px; white-space: nowrap; overflow: visible; text-overflow: ellipsis; padding: 0px; position: relative; /*<-----add this position in the css*/ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <table> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> 

Answer 2

A hackish css only way would be this

td {
  position: relative;
}

td:nth-child(1) {
    z-index: 1;

}
td:nth-child(2) {
    z-index: 2;
}
td:nth-child(3) {
    z-index: 3;
}

and so on...

EDIT: Now I realized the question isn't about css, I'm sorry about that.

Try this one with javascript

https://jsfiddle.net/zvbLz2n3/3/

EDIT 2 : Can someone confirm if this works.

Only css not-hackish solution

https://jsfiddle.net/zvbLz2n3/4/