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

看看小提琴

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

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

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

看看小提琴

Answer 2

您可以尝试为文本框指定最大宽度，以 px 或 em 为单位。

input[type='text']{max-width:4em}

我会说和他们一起去。