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

我正在使用twitter引导，我有两个类似的表：

<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>

XS
XS
XS
XS
XS
XS
XS
XS
XS
XS

第一个表的文本输入没有调整大小，因此该表没有响应。 但是在第二个表中，这个示例非常适合简单的文本

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

---

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

您可以尝试在px或em中指定文本框的最大宽度

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

---

我要说的是使用它们。

我认为这样做的方法是使用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;
}

---

查看

，但如果td的宽度大于4em，则输入将不会调整大小以获得最大值。请使用另一个解决方案再次查看我的更新答案更新答案以将InputsHanks@Khanh居中对齐！第二个解决方案是岩石！很好用！