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

我想弄清楚如何删除HTML表格中的表格数据之间的额外空间。例如，在下面的代码中，在我的Web浏览器IE中查看代码时，“名字”表格数据和“输入名称”表格数据之间会有额外的空间。这里的例子：如何删除HTML表格行中表格数据之间的空白？

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

我需要输入文本框是相当接近的类别（即：“名字”）。我有要求，包括没有表格边框，2的cellpadding和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>

来源

2010-02-14 Ashley

呃......如果你有一个2像素的单元格填充指定，那么你至少会有这样的......你可以尝试右对齐第一列中的文本，这将保持正确*文本本身*的边缘尽可能靠近下一列。 – Shog9

我想她想缩小左列的宽度，以便它只占用最长条目所需的空间。 2像素似乎不成问题。 –

啊，好的。如果是这种情况，那么是的，对文本进行右对齐是使它尽可能接近的唯一方法*，但是可以通过使用Pekka和RegDwight概述中的任一技术来最小化总列宽。 – Shog9

它听起来像你需要对齐第一列中的文本。你可以这样说：

<td align='right'>

或CSS

和风格将是：

.label { 
    text-align:right; 
}

来源

2010-02-14 20:20:58 Ray

@ Ray-这样做可以获得与输入框并排的td“First Name”，但这两个数据片现在都在右侧，我需要它左对齐。任何想法，我可以做到这一点？ – Ashley

我不确定你的意思是'这两个数据现在都在右侧'。右对齐应该只在左侧列，而不是右侧。另外，您应该在RegDwight建议的标题行上执行colspan操作。 – Ray

@ Ray - 我的意思是“名字”文本和输入文本框现在并排，但它们位于页面的最右侧，而不是像我需要的那样位于左侧。我尝试添加colspan到我的th标签，但没有奏效。我发现的唯一工作是将style =“float：left”;在第一个名字的中，将它放到左边，但是对其他人不要将它们放在另一个下面，而是彼此并排放置。所以我仍然试图把它全部弄清楚。 – Ashley

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

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

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

来源

2010-02-14 20:07:30 DVK

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

来源

2010-02-14 20:09:19

我假设你想要的左手列宽调整，以便它的宽度与它的最长项。这实际上是一个有趣的问题。

我最常做的：

给左栏一个white-space: nowrap样式属性
给右侧栏的宽度稍微比它应该是，例如也许70%。这是一个尝试的问题。

结果是右侧栏“按下”左侧栏，没有指定宽度。左边的列将显示内容的长度。

我很感兴趣，看看是否有一些其他的，更清洁的这个解决方案，我都忽略了过去八年:)

代码示例：

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

应该足够在第一行中设置宽度。

来源

2010-02-14 20:10:08

@ Pekka-我直接在每个的td字段中试过，它对我没有任何作用。我不知道为什么它不起作用。你通常如何写它？ – Ashley

@Ashley看到我更新的答案。 –

首先，把colspan="2"您th：

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

如果没有这一点，th将不必要地伸展td的IT下方（即左栏）。 colspan="2"将在整个表格的宽度上延伸th。这应该至少解决一部分问题，并使td靠得更近。如果这还不够，你可以在任何td，它出现的设置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只是一个例子，你不得不尝试着一点点找到最佳值。

来源

2010-02-14 20:18:20

@ RegDwight-我试过你说的话，但他们没有奏效。插入colspan = 2只是移动标题“个人信息”而不是“名字”或输入框。我确定你所说的必须工作，但我似乎无法得到它。我会一直搞乱它和其他想法。 – Ashley

@ RegDwight-我得到了这个工作。谢谢你的帮助！ – Ashley

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

来源

2010-02-14 20:55:00

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

回答

相关问题