代码之家  ›  专栏  ›  技术社区  ›  Matt

如何溢出<td>中的特定内容?

  •  2
  • Matt  · 技术社区  · 14 年前

    我从这样的TD手机开始

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

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

    A州,我现在有,看起来像这样

    [123][45AAAAAAAAAAAAA6][7AAAAA89]

    我想让B州看起来像这样

    [*输入文本字段*AAAAAAAAA 6][7AAAAA89]

    3 回复  |  直到 14 年前
        1
  •  0
  •   Kyle    14 年前
    <td>
    <span>123</span>
    <input style="display:none;">
    </td>
    

    是对您的标记的更正,但是您到底想要达到什么效果,到目前为止您已经尝试了什么?

        2
  •  0
  •   Conex    14 年前
    <td>
    <span>123</span>
    <div id="hidden">
    <input type="text" />
    </div>
    </td>
    

    在样式定义中:

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

    编写显示DIV ON over的脚本(您将需要包括jquery js…)

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

    明白了。我没有意识到带有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>