How can i get a td by clicking if it has previous

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

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/

Answer 2

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>