Question

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

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>

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

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

输入框将边距放在一个全宽的表格中

3 个答案: