Question

I have a table, in which we have many input boxes.What i want to do is that when it gets focus the width increases similar to what happens in Google Docs Spreadsheet Editor.
First the Code

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>

And the relevent 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;
}

This code works fine at some places, but the expanded input box does not overlap the next cell when it recieves focus, instead it goes under it and then re appears at the end of that cell.

Note:no. of columns are not fixed, I think that Z-index value is having issues.

What I want:http://imm.io/TOuB
What I get:http://imm.io/TOuf

Answer 1

try this

 /*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>