Question

如果对第二个td点击了上一个td的溢出文本，则处理程序返回第一个td，因为文本属于第一个td 。而不是我需要选择第二个td而不管它有溢出文本。提前谢谢。

Answer 1

我认为不是将属性设置为true，而是必须在模糊时将其设置为false，并且需要将css属性position:relative;设置为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

只有这种

的hackish css

td {
  position: relative;
}

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

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

依旧......

编辑：现在我意识到问题不是关于CSS，我很抱歉。

尝试使用javascript

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

编辑2：有人可以确认这是否有效。

只有css not-hackish解决方案

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

如何通过点击它是否有以前td的溢出文本

2 个答案: