如何在表格中放置具有动态宽度的输入文本？

Question

我正在使用 twitter-bootstrap，我有两个这样的表：http : //jsfiddle.net/MELUd/

<table class="table table-bordered">
    <thead>
        <tr>
            <td colspan="2"><input type="text" ></td>
            <td colspan="2"><input type="text" ></td>
            <td colspan="2"><input type="text" ></td>
            <td colspan="2"><input type="text" ></td>
            <td colspan="2"><input type="text" ></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td >XS</td>
            <td >XS</td>
            <td >XS</td>
            <td >XS</td>
            <td >XS</td>
            <td >XS</td>
            <td >XS</td>
            <td >XS</td>
            <td >XS</td>
            <td >XS</td>
        </tr>
    </tbody>
</table>

第一个表格的文本输入不会调整大小，因此表格没有响应。但在第二个表中，示例与简单文本完美配合。

如何使输入文本具有动态宽度，以便看不到水平滚动条？

任何帮助、提示或建议将不胜感激，如果您需要更多信息，请告诉我，我会编辑帖子。

Answer 1

我认为这样做的方法是使用javascript动态更改宽度。

$(document).ready(function(){
    $('input').each(function(){
        $(this).width($(this).parent().width()-20);
    });
});

检查小提琴

请相应地调整您的填充和边距以使输入居中。

另一种解决方案是将输入显示为块

.table input{
    display:block;
    width:80%;
    margin-left:auto;
    margin-right:auto;
}

检查小提琴