Question

考虑这个简单的HTML：

<html>
<body>
<!-- Table for reference purposes -->
<table cellpadding="0" cellspacing="0" border="1" style="width: 200px">
    <tr>
        <td>100px</td>
        <td>100px</td>
    </tr>
</table>
<table cellpadding="0" cellspacing="0" border="1" style="width: 200px">
    <tr>
        <td><input style="width:100px"/></td>
        <td>100px</td>
    </tr>
</table>
</body>
</html>

顶部的表格仅供参考，您可以看到我的期望。在底部的表格中，输入右侧有一个很大的间隙。它为什么存在，如何在不减少输入大小的情况下摆脱它？

谢谢，斯蒂芬

你们有些人已经回答说我应该设置TD的宽度，所以我已经完成了这个，但这两个表仍然没有对齐。如何在不减小输入大小的情况下解决这个问题呢？（我不希望输入右边的间隙）

<html>
<body>
<!-- Table for reference purposes -->
<table cellpadding="0" cellspacing="0" border="1" style="width: 200px">
    <tr>
        <td style="width:100px">100px</td>
        <td style="width:100px">100px</td>
    </tr>
</table>
<table cellpadding="0" cellspacing="0" border="1" style="width: 200px">
    <tr>
        <td style="width:100px"><input style="width:90px"/></td>
        <td style="width:100px">100px</td>
    </tr>
</table>
</body>
</html>

我已暂时将此示例上传至http://losthobbit.net/temp/testx.html，因此您可以准确了解我所说的内容。

Answer 1

问题是<input>元素具有额外的填充，边框和边距，使其比您应该的更宽。你可以删除额外的东西，使输入与表格单元格齐平，或者使输入的宽度变小。

Answer 2

我能够在第二张桌子上找到以下HTML：

<table cellpadding="0" cellspacing="0" border="1" style="width: 200px">
    <tbody><tr>
        <td><input style="width:97px;margin:0 !important;padding:0; float: left;"></td>
        <td style="width:100px">100px</td>
    </tr>
</tbody></table>

Answer 3

为什么不呢 <td><input style="width:90px"/></td>

或者

<td><input size="11"></td>

Answer 4

设置表格中第一个<td>的宽度。

<td style="width:100px;">

Answer 5

由于你已经为表指定了固定宽度，我认为第一个表格单元将尝试占用最大空间。如果你必须指定一个表格宽度，那么也指定一个单元格的宽度..这样就不会出现空格

Answer 6

我找到了解决问题的方法：减小TD的大小，保持表格的宽度相同，例如：

<table cellpadding="0" cellspacing="0" border="1" style="width: 200px">
    <tr>
        <td style="width:97px"><input style="width:90px"/></td>
        <td style="width:97px">100px</td>
    </tr>
</table>

Answer 7

<table cellpadding="0" cellspacing="0" border="1" style="width: 200px">
    <tr>
        <td>100px</td>
        <td>100px</td>
    </tr>
</table>
<table cellpadding="0" cellspacing="0" border="1" style="width: 200px">
<col span="2" width="100px">
    <tr>
        <td><input style="width:95%"></td>
        <td>100px</td>
    </tr>
</table>

使用<col>设置宽度，然后将输入宽度减小到较小的百分比，以便为它的边框和填充留出空间，使得两个表格对齐我

如何消除TD内输入框右侧的间隙

7 个答案: