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

【问题标题】：How do I remove the space between table data in a table row in HTML?如何删除 HTML 表格行中表格数据之间的空格？
【发布时间】：2023-03-10 13:16:01
【问题描述】：

我试图弄清楚如何删除 HTML 表格行中表格数据之间的额外空间。例如，在下面的代码中，当在我的网络浏览器 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>

【问题讨论】：

呃...如果您指定了一个 2 像素的单元格填充，那么您至少会有那个...您可以尝试将第一列中的文本右对齐，这将文本本身的右边缘尽可能靠近下一列。
我认为她想最小化左列的宽度，以便只占用最长条目所需的空间。 2 像素似乎不是问题。
啊，好的。如果是这种情况，那么是的，右对齐文本是使其尽可能接近的唯一方法，但您可以使用 Pekka 和 RegDwight 大纲中的任何一种技术来最小化总列宽.

标签： html input html-table

【解决方案1】：

听起来您需要右对齐第一列中的文本。你可以这样做：

<td align='right'>

或使用 css

<td class='label'>

样式是：

.label {
  text-align:right;
}

【讨论】：

@Ray- 这样做会使 td“名字”与输入框并排，但现在两条数据都在右侧，我需要它左对齐。有什么想法可以做到吗？
我不确定您所说的“两条数据现在都在右侧”是什么意思。右对齐应该只在左侧列中，而不是在右侧。此外，您应该在 RegDwight 建议的标题行上执行 colspan 操作。
@Ray-我的意思是“名字”文本和输入文本框现在并排，但它们位于页面的最右侧，而不是像我需要的那样位于左侧成为。我尝试将 colspan 添加到我的 th 标签，但这没有用。我发现唯一可行的方法是把 style="float: left";在 First Name 的中将其放在左侧，但对其余部分执行此操作不会将它们放在另一个下方，而是彼此并排放置。所以我还在努力解决这一切。
听起来好像是桌子外的东西导致了这个新问题。如果您使用我建议的 css 版本，页面上的其他内容是否可能使用将所有内容推向右侧的类“标签”？您永远不必浮动表格行。
@Ray- 我明白为什么会有这么多空间。这是因为我的所有嵌套表都有两列，并且输入框被塞进第二列，但是如果我将它与“名字”表数据部分一起放入，它们是并排的。是的！！不过感谢您的帮助。

【解决方案2】：

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

这里有一个很好的示例教程：

http://www.quirksmode.org/css/tables.html

【讨论】：

【解决方案3】：

<table border="0" cellpadding="2" cellspacing="0" width="65%">
...
</table>

【讨论】：

【解决方案4】：

首先，在您的th 上添加一个colspan="2"：

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

没有这个，th 将不必要地拉伸它下面的tds（即左列）。 colspan="2" 会将th 拉伸到整个表格的宽度。这应该至少可以解决部分问题，并使tds 更加靠近。如果这还不够，您可以通过在其中的任何tds 上设置width 属性来定义左列的固定宽度，例如：

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

<tr> 
    <td width="200">First Name:</td> 
    <td><input ... /></td> 
</tr> 

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

更好的是，使用 CSS 设置宽度，em 而不是像素，以使单元格宽度随字体大小缩放：

<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 只是示例，您需要进行一些试验才能找到最佳值。

【讨论】：

@RegDwight- 我试过你所说的，但没有奏效。插入 colspan=2 只是移动了标题“个人信息”而不是“名字”或输入框。我确定你所说的必须有效，但我似乎无法做到。我会继续弄乱它和给出的其他想法。
@RegDwight- 毕竟我得到了这个工作。感谢您的帮助！

【解决方案5】：

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

我通常做什么：

给左栏一个white-space: nowrap样式属性
将右侧列的宽度略大于应有的宽度，例如也许70%。那是尝试的问题。

结果是右侧列“压”在未指定宽度的左侧列上。左边的列会放弃，但只会影响到其内容的长度。

我很想看看在过去的八年里我是否有其他更清洁的解决方案来解决这个问题:)

代码示例：

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

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

【讨论】：

@Pekka-我直接在每个的 td 字段中尝试了这个，但它对我不起作用。我不知道为什么它不起作用。你平时是怎么写的？

【解决方案6】：

使用 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>

【讨论】：