I need to make an input field overflow a td without changing its position or the tds width using CSS and jQuery

Question

I need to enlarge an input field when it's on focus without the containing td enlarging, too.

Further on both fields should stay on their actual position (have a look on the fiddle, it mooves) and not move up or down (what is caused by the absolute position).

This is my actual state

    $('.Bemerkung').focus(function() {
    $(this).attr('size','30');
    $(this).parent().css({'position':'absolute'});
    $(this).css({'position':'absolute'});
})
$('.Bemerkung').blur(function() {
    $(this).attr('size','5');
    $(this).removeAttr('style');
    $(this).parent().removeAttr('style');
})

http://jsfiddle.net/kazuya88/dhy0dxyy/

Hope you can help me.

Answer 1

It's not too far from what you originally had:

$('.Bemerkung').focus(function() {
    oldWidth = $(this).width();
    $(this).attr('size','30');
    $(this).css({'position':'relative'});
    $(this).css({'margin-right':('-'+($(this).width()-oldWidth)+'px')});
})
$('.Bemerkung').blur(function() {
    $(this).attr('size','5');
    $(this).removeAttr('style');
    $(this).parent().removeAttr('style');
})

Update: I figured I should add more explanation about what is going on here. This basically detects what the size is before gaining focus, then increases the size and sets the right margin to the difference between the new size and the old size (thus making the renderer see it as the same "width" as before gaining focus). Position:relative is so that the element width will not affect the td width (as long as right-margin is set negative).

Answer 2

You could use transform: scale(1.2) to enlarge it, add transition and remove absolute position declarations.

$('.Bemerkung').focus(function() {
  $(this).css({
    'transition': 'transform 0.5s',
    'transform': 'scale(1.2)'
  });
});
$('.Bemerkung').blur(function() {
  $(this).css({
    'transform': 'scale(1)'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="weektimereg" class="recordlist" border=1 style="text-align:center;">
  <tr>
    <th style="width:110px;">sample</th>
    <th style="width:110px;">sample2</th>
  </tr>
  <tr>
    <td>
      <input type=text size=3 name=abc value='03:00'></input>
      <input class='Bemerkung' type=text size=5 name=cde value='test'></input>
    </td>
    <td>
      <input type=text size=3 name=abc value='03:00'></input>
      <input class='Bemerkung' type=text size=5 name=cde value='test'></input>
    </td>
  </tr>
  <tr>
    <td>
      <input type=text size=3 name=abc value='03:00'></input>
      <input class='Bemerkung' type=text size=5 name=cde value='test'></input>
    </td>
    <td>
      <input type=text size=3 name=abc value='03:00'></input>
      <input class='Bemerkung' type=text size=5 name=cde value='test'></input>
    </td>
  </tr>
</table>