太多的间距 - 表

Question

我的桌子有些问题。看起来字段名称和文本框之间的距离有点大。

我是否有任何问题造成这种情况？我怎样才能减少空间？看看下面的图片。

这是我的HTML：

<h5>Free Room of Cleaning & Carpet Audit</h5>

<table border="0" border-collapse:collapse; width:80% colspan="3">
<tbody>

<tr>
<td>Name: <span style="color:red;"><strong>*</strong></span></td>
<td>[text* client-name] </td>
</tr>

<tr>
<td>Phone: <span style="color:red;"><strong>*</strong></span></td>
<td> [text* phone] </td>
</tr>


<tr>
<td>Email: <span style="color:red;"><strong>*</strong></span></td>
<td>[email* email]</td>
</tr>

<tr>
<td>Best time to call: &nbsp; </td>
<td>[select best-time "Morning" "Afternoon" "After 5pm"] </td>
</tr>

<tr>
<td>Address:</td>
<td> [text address]</td>
</tr>

<tr>
<td>City</td>
<td>[text city]</td>
</tr>

<tr>
<td>State: </td>
<td>[text state]</td>
</tr>

<tr>
<td>Zip:</td>
<td>[text zip]</td>
</tr>

<tr><td colspan="2">Questions/Comments
[textarea questions id:questions] 
</td></tr>

<tr><td colspan="2">[submit "Submit"]</td>
</tr>
</tbody>
</table>

这是一个JSFiddle，演示了这个问题：https://jsfiddle.net/sLv3e8f5/

Answer 1

默认情况下，浏览器布置表的方式，每个列的大小都设置为适合其最大子元素的宽度。在这种情况下，最大的子元素是表格单元格，其值为＆＃34;调用＆＃34;的最佳时间，这会导致列在宽度上扩展以适应该长度。

您可以为表格的第一列添加固定宽度来修复此问题，这将导致您的最长行，＆＃34;最佳时间调用＆＃34;来换行。

在下面的示例中，我向表中添加了id，然后使用CSS将表格的第一列作为目标，并为其指定了width。我还给了你的＃34;问题/评论＆＃34;形成一个宽度，使其匹配。

结果截图：

现场演示：

＆＃13;

＆＃13;

#thetable td:first-child {
    width: 70px;
}

#qa {
    width: 240px;
}

＆＃13;

<h5>Free Room of Cleaning & Carpet Audit</h5>

<table id="thetable" border="0" border-collapse:collapse; width:80% colspan="3" cellspacing="0" cellpadding="0" >
<tbody>

<tr>
<td>Name: <span style="color:red;"><strong>*</strong></span></td>
<td> <input type="text"> </td>
</tr>

<tr>
<td>Phone: <span style="color:red;"><strong>*</strong></span></td>
<td> <input type="text"> </td>
</tr>


<tr>
<td>Email: <span style="color:red;"><strong>*</strong></span></td>
<td><input type="text"></td>
</tr>

<tr>
<td>Best time to call: &nbsp; </td>
<td><select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select> </td>
</tr>

<tr>
<td>Address:</td>
<td> <input type="text"></td>
</tr>

<tr>
<td>City</td>
<td><input type="text"></td>
</tr>

<tr>
<td>State: </td>
<td>[text state]</td>
</tr>

<tr>
<td>Zip:</td>
<td><input type="text"></td>
</tr>

<tr><td colspan="2">Questions/Comments
<textarea id="qa" rows="4" cols="50">
</textarea>
</td></tr>

<tr><td colspan="2"><input type="submit"></td>
</tr>
</tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

JSFiddle版本：https://jsfiddle.net/sLv3e8f5/2/

Answer 2

尝试在您的桌子上添加cellspacing="0"和cellpadding="0"，

Answer 3

添加

margin-left:3px;

到

<td>

例如，

<td style="margin-left:3px;">[text* client-name]</td>

Answer 4

你的空间是由＆＃34;最好的时间来呼叫＆＃34;细胞。将该单元格包裹成两行以移除多余的空格。

Answer 5

因为表格单元格通过“最佳通话时间：”对齐。 如何使用<ul><li>

Answer 6

删除表格可以让您通过CSS样式开启各种可能性。

以下是一个非常快速和肮脏的例子：

label {
    /*float:left;*/
    width: 8em;
    display:block;
    clear:both;   
    margin-top: 10px;
}
input, select {
    float:left;
    margin-top: 10px;
    margin-left: 20px;
}
label.required::after {
    content:'*';
    color: #F00;
    padding-left:0.25em;
}

.required+input, .required+select
{
    background-color:#FCC;
}

<fieldset>
    <legend>Free Room of Cleaning & Carpet Audit</legend>
    <label class="required" for="name">Name:</label>
    <input type="text" id="name" name="name" />
    <label class="required" for="phone">Phone:</label>
    <input type="text" id="phone" name="phone" />
    <label class="required" for="email">Email:</label>
    <input type="text" id="email" name="email" />
    <label for="call">Best time to call:</label>
    <select id="call" name="call">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
    <label  for="Address">Address:</label>
    <input type="text" id="Address" name="Address" />
</fieldset>