css - 输入框在全宽表格中向右放置边距

Question

当我尝试将输入框放在宽度为 100% 的表格中时，它会将边距放在右侧。我只希望输入适合表格而不扩展表格。

http://jsfiddle.net/aKznJ/1/

table {
    border-collapse: collapse;
    border-spacing: 0;
}
.fullWidth table {
    border: 1px solid #ccc;
    width: 100%;
    text-align: left;
}
.fullWidth td, .fullWidth th{
    border: 1px solid #ccc;
    padding: 3px;
}

Answer 1

这就是表格的工作方式，它根据内容相对于其他单元格的大小来计算每列的宽度。TextBox 比所有其他单元格文本大，因此该列获得更多百分比。

您可以为单元格添加固定宽度，例如：

<td style="width:150px;">
    <input type="text"/>
</td>

这是一个例子

---

或者，如果您希望单元格均匀分布，您可以使用 CSS 向单元格添加百分比，如下所示：

table tr td {
    width: 33%;
}

这是一个例子

但请记住，这将适用于所有表，因此如果不同的表具有不同的列数，那么您需要为每个表执行不同的列，例如：

table.threecolumns tr td {
    width: 33%;
}

table.twocolumns tr td {
    width: 50%;
}

其 HTML 可能如下所示：

<table class="threecolumns">
   ...
</table>

这是一个例子

Answer 2

<td>在您输入的位置添加一个类。并在 CSS 中指定它的宽度，或者您可以直接在<td>

<td class="textStyle">
    <input type="text"/>
</td>

和 CSS

.textStyle{
    width:100px;
}

或者

<td width=100px>
    <input type="text"/>
</td>

Answer 3

将输入宽度设置为 100% 应该可以解决问题

input {
    width: 100%;
}