Question

我从像这样的td单元开始

<td>
<span>123</span>
<input style="display:none;">
</td>

我正在寻找一种方法来设计这样，以便隐藏原始内容，输入框显示并溢出而不是调整td的大小，并将td大小保持为原始内容。

我现在拥有的状态A看起来像这样

[123] [45aaaaaaaaaaaaaaa6] [7aaaaaa89]

我希望状态B看起来像这样

[*输入文字字段* aaaaaaaaa6] [7aaaaaa89]

Answer 1

<td>
<span>123</span>
<input style="display:none;">
</td>

是否对您的标记进行了更正，但到目前为止您想要实现的效果到底是什么？

Answer 2

<td>
<span>123</span>
<div id="hidden">
<input type="text" />
</div>
</td>

样式中的

定义：

#hidden{
 display:none;
 position:absolute;
 margin:.5em;
}

制作显示div的脚本（你需要包含jquery js ......）

<script type="text/javascript">
  $(document).ready(function(){
    $('table tr td').children().find('div').hover(function(){
       $(this).show();
     }
    )
  });
</script>

Answer 3

想出来。我没有意识到的是，一个具有position：absolute的元素不能被假定为默认为0,0位置，所以我需要将Left设置为0

<td>
 <div style="position: relative;">
  <span style="visibility:hidden;">123</span>
  <input style="position: absolute; left:0; display:inline;">
 </div>
</td>

如何溢出内部的具体内容？

3 个答案: