javascript - 溢出 td 内容到下一个 td 元素，而不会在 HTML 表格中移动

Question

考虑以下模型 -

第三列包含一个按钮，单击该按钮时将替换为文本框和保存；取消按钮。整个实体溢出到下一个 td 元素，漂浮在顶部而不会移动下一个 td 元素中的按钮。这一切都在 <table> 中完成元素。

有人可以提出实现此目标的方法吗？

Answer 1

是这样的吗？

$(function() {
	$('input').on('focus blur', function(e) {
  	var elem = $(this),
        td = elem.closest('td'),
        div = td.find('div');
        show = ( e.type == 'focus' );
    td.toggleClass('flowTD', show);
		div.toggleClass('flowDIV');
  });
});

* { box-sizing: border-box; }
td {
  padding: 0 .25em;
  height: 3em;
  border: 1px solid lightgreen;
}
input {
  width: 3em;
}
.flowTD {
  padding-top: 0;
  vertical-align: top;
}
.flowDIV {
  position: absolute;
  border: 1px solid blue;
  background: lightblue;
  height: 3em;
  vertical-align: middle;
  line-height: 3em;
  margin-left: -.25em;
  margin-top: -1px;
  padding: 0 .25em;
}
div input[type="submit"] {
  display: none;
  width: auto;
}
div.flowDIV input[type="submit"] {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>2749.5</td>
    <td>0.13</td>
    <td>
      <div>
        <input type="text" />
        <input type="submit" value="Save" />
        <input type="submit" value="Cancel" />
      </div>
    </td>
    <td>buttons</td>
  </tr>
</table>

它需要一些调整，但可以让您抢先一步。