如何在HTML中删除表格行中表格数据之间的空格？

我试图找出如何在HTML中删除表行中表数据之间的额外空间。例如，在下面的代码中，当在我的web浏览器IE中查看代码时，“名字”表数据和“输入名称”表数据之间有额外的空间。以下是示例：

<tr> 
<td>First Name:</td> 
<td><input name="fname" id="fname" size="30" type="text" /></td> 
</tr>

名字：

我需要输入文本框合理地接近类别（即：“名字”）。我要求不包括表边框，单元格填充为2，宽度为65%，这就是我在代码中列出的，它正是这样做的

我如何保持这些需求，并且仍然获得我所需要的外观（这是两个表数据字段之间的最小空间）？任何帮助都将不胜感激。谢谢

这是我的密码：

    <form name="Web Order Form" id="Web Order Form">
<table border="0" cellpadding="2" width="65%">
<!--Personal Info. table -nested table 1 -->
    <tr>
        <th>Personal Information</th>
    </tr>

    <tr> 
        <td>First Name:</td> 
        <td><input name="fname" id="fname" size="30" type="text" /></td> 
    </tr> 

    <tr>
        <td>Last Name:</td>
        <td><input name="lname" id="lname" size="30" type="text" /></td>
    </tr>

    <tr>
        <td>Address:</td>
        <td><input name="address" id="address" size="30" type="text" /></td>
    </tr>

    <tr>
        <td>City:</td>
        <td><input name="city" id="city" size="35" type="text" /></td>
    </tr>

    <tr>
        <td>State:</td>
        <td><input name="state" id="state" size="3" type="text" /></td>
    </tr>

    <tr>
        <td>Zip Code:</td>
        <td><input name="zip" id="zip" size="10" type="text" /></td>
    </tr>

    <tr>
        <td>Country:</td>
        <td><input name="country" id="country" size="10" type="text" /></td>
    </tr>

个人信息
名字：
姓氏：
地址:
城市：
声明：
邮政编码：
国家：

您需要使用CSS来控制单元格间距

下面是一个很好的教程，其中有一些示例：

...

我假设您想要调整左侧列的宽度，使其与最长的条目一样宽。这实际上是一个有趣的问题

我通常做的是：

• 为左侧列指定一个

  空白：nowrap

  样式属性

• 为右侧列指定略大于其应有宽度的宽度，例如，可能

  70%

  。这是一个尝试的问题

结果是右侧列“按压”左侧列，左侧列没有指定宽度。左列将让步，但仅限于其内容的长度

我很想看看是否有其他更干净的解决方案，而我在过去八年中却忽略了这一点：）

代码示例：

<tr>
 <td style="white-space: nowrap">Label</td>
 <td style="width: 95%">Input</td>
</tr>

标签
输入

---

设置第一行的宽度就足够了。

首先，在

上放置一个
colspan=“2”
：

<tr>
    <th colspan="2">Personal Information</th>
</tr>

更好的方法是，在
em
中使用CSS设置宽度，而不是使用像素，以便使单元格宽度与字体大小成比例：

<tr>
    <th colspan="2">Personal Information</th>
</tr>

<tr> 
    <td style="width:10em">First Name:</td> 
    <td><input ... /></td> 
</tr> 

<tr>
    <td>Last Name:</td>
    <td><input ... /></td>
</tr>


个人信息
名字：
姓氏：

值
200
和
10em
只是示例，您需要进行一些实验以找到最佳值。
很快，您需要右对齐第一列中的文本。您可以这样做：

<td align='right'>

使用CSS：

td {
  padding: 0;
  margin: 0; /** or whatever pixel you prefer **/
}

table {
  white-space: nowrap;   /** I don't know if this will help, just giving solutions **/
}

和你的html

<tr> 
       <td align="right">First Name:</td> 
       <td align="left"><input name="fname" id="fname" size="30" type="text" /></td> 
</tr>


名字：
嗯。。。如果你指定了一个2像素的单元格填充，那么你至少会有这个。。。你可以尝试右对齐第一列中的文本，这将使文本的右边缘尽可能靠近下一列。我认为她想模拟左列的宽度，以便只占用最长输入所需的空间。2像素似乎不是问题。啊，好的。如果是这样的话，那么是的，正确证明文本是使其尽可能接近的唯一方法，但是您可以使用Pekka和RegDwight outline中的任何一种技术来最小化总列宽。@Ray-这样做会得到td“First Name”与输入框并排，但两条数据现在都在右侧，我需要左对齐。你知道我该怎么做吗？我不知道你所说的“两个数据现在都是正确的”是什么意思。右对齐应仅在左侧列中，而不是在右侧列中。此外，您应该在RegDwight建议的标题行上执行colspan操作。@Ray-我的意思是“名字”文本和输入文本框现在并排排列，但它们位于页面的最右侧，而不是我需要的左侧。我试着把colspan加到我的标签上，但是没有用。我发现唯一有效的方法是放置style=“float:left”；以第一个名字来说，把它放在左手边，但对其他人这样做并不是把它们一个放在另一个下面，而是并排放在另一个下面。所以我仍在努力解决这个问题。听起来好像是桌子外的东西导致了这个新问题。如果您使用了我建议的css版本，那么页面上的其他内容是否可能使用类“label”来将所有内容推向正确的方向？您不应该让表中的行浮动。@Ray-我明白了为什么有这么多空间。这是因为我的所有嵌套表都有两列，输入框被塞进了第二列，但是如果我把它和“First Name”表数据部分放在一起，它们是并排的。赞成！！不过谢谢你的帮助。@RegDwight-我试过你说的话，但都没用。插入colspan=2只是移动了标题“个人信息”，而不是“名字”或输入框。我相信你说的一定行得通，但我似乎没法做到。“我会继续搞砸它和其他的想法。”雷格德怀特——毕竟，这是我要做的。谢谢你的帮助@佩卡-我在每个人的td领域都直接尝试过，但对我来说都不起作用。我不知道为什么它不起作用。你通常是怎么写的？
<td class='label'>

.label {
  text-align:right;
}

td {
  padding: 0;
  margin: 0; /** or whatever pixel you prefer **/
}

table {
  white-space: nowrap;   /** I don't know if this will help, just giving solutions **/
}

<tr> 
       <td align="right">First Name:</td> 
       <td align="left"><input name="fname" id="fname" size="30" type="text" /></td> 
</tr>