我需要使用CSS和jQuery使输入字段溢出td，而不改变其位置或tds宽度

我需要放大一个焦点上的输入字段，而不需要放大包含的td

此外，这两个字段应保持在其实际位置（查看小提琴，它发出嘟嘟声），而不是向上或向下移动（由绝对位置引起）

这是我的真实状态

    $('.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');
})

---

希望您能帮助我。

您可以使用

变换：缩放（1.2）

来放大它，添加

变换

并删除

绝对

位置声明

$（'.Bemerkung'）.focus（函数（）{
$（this.css）({
“转换”：“转换0.5s”，
“转换”：“比例（1.2）”
});
});
$（'.Bemerkung'）.blur（函数（）{
$（this.css）({
“变换”：“比例（1）”
});
});

样品
样本2
尝试用严格的CSS替换javascript

我做的一件事是使td单元格文本对齐：左。这是目前唯一真正的区别。切换到绝对位置时出现移动的原因是，它试图将图元与中心对齐，但绝对图元不会被测量或居中

这是CSS

table td{
position: relative;
overflow: visible;
text-align: left;
}

.Bemerkung:focus{
    width: 196px;
    position: absolute;
    z-index: 10000;
}

如果您需要文本对齐：居中，请告诉我，我将寻找不同的解决方案。
它与您最初的解决方案相差不远：

$('.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');
})

更新：我想我应该补充更多关于这里发生的事情的解释。这基本上是在获得焦点之前检测大小，然后增加大小并将右边距设置为新大小和旧大小之间的差值（从而使渲染器将其视为与获得焦点之前相同的“宽度”）。位置：相对，这样元素宽度就不会影响td宽度（只要右边距设置为负值）。
在Chrome中看起来不会移动。我使用Chrome，文本框在对焦时不在表中。你是想让文本框的焦点更宽，而不是改变列的宽度吗？我更新了小提琴-如果你有一行有两行，输入会移动得更清晰。请注意，这可以让你保持中心对齐。仅供参考，以下是您的旧代码与上面代码的区别：