html - 如何将具有动态宽度的输入文本放入表格中？

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);
    });
});

查看 fiddle

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

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

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

查看 fiddle