输入框在全宽表格中向右放置边距答案

【问题标题】：Input box putting margin to right in a table with full width输入框在全宽表格中向右放置边距
【发布时间】：2017-07-05 06:13:32
【问题描述】：

当我尝试将输入框放入宽度为 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;
}

【问题讨论】：

标签： css input width css-tables

【解决方案1】：

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

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

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

Here is an example

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

table tr td {
    width: 33%;
}

Here is an example

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

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

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

HTML 可能如下所示：

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

Here is an example

【讨论】：

感谢有关表格如何工作的信息，现在已解决:)

【解决方案2】：

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

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

和 CSS

.textStyle{
    width:100px;
}

或

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

【讨论】：

【解决方案3】：

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

input {
    width: 100%;
}

【讨论】：

我认为这不是 OP 想要的，我认为问题在于表格列的大小，而不是文本框没有填满它
他提到表格不应该扩大。但确实必须给出列宽以防止其他列收缩。