테이블 셀의 입력 상자는 포커스가있을 때 확장해야합니다

Question

테이블이 있습니다. 입력 상자가 많습니다. 포커스를 얻으면 너비가 Google 워드 프로세서 스프레드 시트 에디터에서와 비슷하게 증가합니다. 먼저 코드

HTML :

<table class="borderbg"> 
<tr class="thead"> 
<th class="stylethLeft"><div id="blank"></div></th> 
<th class="styleth">blah</th> 
<th class="styleth">blah</th> 
</tr> 
<tr> 
<td class="tdstyle_serial_number">1</td> 
<td class="td_names" id="alpha"><input type="text" 
class="styledinput" /></td> 
<td class="td_twochars" id="alpha"><input type="text" 
    class="styledinput" /></td> 
    </tr> 
    </table> 

그리고 그와 관계있는 CSS의

//Input Box 
input.styledinput{ 
background:#FFF; 
border:0; 
margin:0; 
padding:0 1% 0 1%; 
    width:98%; 
height:100%; 
font-size:12px; 
    } 
//Focus 
.styledinput:focus{ 
    border:2px solid #205081; 
    width:250%; 
    z-index:15; 
    } 
    //table class 
    .borderbg{ 
    border:1px solid #989292; 
    visibility: visible; 
    border-left:none; 
    border-top:none; 
    border-collapse:collapse; 

    padding:0; 
    float:left; 
    margin-top:0; 
    margin-left:0; 
} 

이 코드는 어떤 장소에서 잘 작동하지만 접수에 때 확장 된 입력 상자가 다음 셀 겹치지 않는 초점, 대신에 그 아래에 가서 그 세포의 끝에 나타납니다.

참고 : 아니오. 열의 고정되지 않습니다, 나는 Z- 색인 값이 문제가 있다고 생각합니다.

내가 원하는 것은 : http://imm.io/TOuB
내가 무엇을 얻을 : http://imm.io/TOuf

Answer 1

이

시도

/*Input Box*/ 

    input.styledinput{ 
    background:#FFF; 
    border:0; 
    margin:0; 
    padding:0 1% 0 1%; 
    width:98%; 
height:100%; 
    font-size:12px; 
} 

/*Focus*/ 

.styledinput:focus{ 
    border:2px solid #205081; 
    width:250%; 
    z-index:20; 
position:relative; 
} 

/*table class*/ 

.borderbg{ 
    border:1px solid #989292; 
    visibility: visible; 
    border-left:none; 
    border-top:none; 
    border-collapse:collapse; 
    padding:0; 
    float:left; 
    margin-top:0; 
    margin-left:0; 

} 
</style> 

Answer 2

을 여기 working example

CSS를 참조하십시오

.search label{ 
    font-size:0.75em; 
    font-weight:bold; 
    color:#333; 
    text-indent:-9999em; 
    display:block; 
    float:left; 
} 

.search input[type="text"]{ 
    text-indent:1px; 
    padding:0 0 0 22px; 
    width:0; 
    height:22px; 
    background:url(http://www.ian-thomas.net/examples/search-icon.png)2px 2px no-repeat, -webkit-linear-gradient(top, rgba(100,100,100,1) 0%, rgba(80,80,80,1) 10%, rgba(22,22,22,1)100%); 
    background:url(http://www.ian-thomas.net/examples/search-icon.png)1px 2px no-repeat, -moz-linear-gradient(top, rgba(100,100,100,1) 0%, rgba(80,80,80,1) 10%, rgba(22,22,22,1)100%); 
    border:1px solid #333; 
    color:#999; 
    line-height:20px; 
    font-weight:bold; 
    -moz-text-shadow:1px 1px 1px rgba(0,0,0,0.05); 
    -webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.05); 
    text-shadow:1px 1px 1px rgba(0,0,0,0.05); 
    -webkit-border-radius:6px; 
    -webkit-box-shadow:1px 1px 0 rgba(0,0,0,0.125); 
    -webkit-transition:width 0.5s ease-in-out; 
    -moz-border-radius:6px; 
    -moz-box-shadow:1px 1px 0 rgba(0,0,0,0.125); 
    -moz-transition:width 0.5s ease-in-out; 
    cursor:pointer; 
} 

.search input[type="text"]:focus{ 
    width:200px; 
    outline:none; 
    background:url(http://www.ian-thomas.net/examples/search-icon.png)2px 2px no-repeat, -webkit-linear-gradient(bottom,rgba(100,100,100,1) 0%, rgba(40,40,40,1) 2%, rgba(22,22,22,1)100%); 
    background:url(http://www.ian-thomas.net/examples/search-icon.png)1px 2px no-repeat, -moz-linear-gradient(bottom,rgba(100,100,100,1) 0%, rgba(40,40,40,1) 2%, rgba(22,22,22,1)100%); 
    -webkit-box-shadow:1px 1px 0 rgba(255,255,255,0.125); 
    -moz-box-shadow:1px 1px 0 rgba(255,255,255,0.125); 
    cursor:text; 
}