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

【问题标题】：How to put a input text with dynamic width in a table?如何将具有动态宽度的输入文本放入表格中？
【发布时间】：2013-05-30 14:39:58
【问题描述】：

我正在使用 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>

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

如何使输入文本具有动态宽度，这样我就看不到水平滚动条了？

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

【问题讨论】：

用另一个解决方案查看我的更新答案
再次更新答案以使输入居中对齐

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

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

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

我会说和他们一起去。

【讨论】：

但是如果 td 的宽度大于 4em 输入将不会调整大小以获得最大值。

【解决方案2】：

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

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

查看fiddle

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

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

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

查看fiddle

【讨论】：

感谢@Khanh TO！第二个解决方案摇滚！完美运行！