移除表头时，将输入字段置于表格单元格的中心

Question

标题应该总结得很好。。。

在这个fiddle中，当您按下"switch"文本时，jQuery会创建一个重复的标头来代替原始标头。（目前）唯一的错误是输入字段向右移动。

我该怎么阻止？

jQuery代码供参考（Stack Overflow不喜欢没有代码）：

function duplicate(){
    var w = $('#old').find('tr:last').find('td').map(function(index){
        return $(this).outerWidth();
    }).get();
    var newth = $('#oldHead').find('th').map(function(){
        return $(this).text();
    }).get();
    for (var i = 0; i < newth.length; i++){
        if (i<1){
            $('<span>' + newth[i] + '</span>').appendTo('#new');
        } else {
            $('<span style="width:' + (w[i] - 20) + 'px">' + newth[i] + '</span>').appendTo('#new > #newfloat');
        }
    }
    $('#oldHead').find('tr').remove();
    $('#oldBody').find('tr:first').find('td').each(function(index){
        $(this).css({'width': w[index] + 'px'});
    });
}
$('#switch').click(function(){
    duplicate();
});

Answer 1

通过在有问题的td标记上使用min-width属性以及删除左侧和右侧填充，问题得到了解决。

http://jsfiddle.net/verism/s7VBu/

如果有人知道这可能引发的任何陷阱，我很想听听。