Слишком много интервалов на <td> - ТАБЛИЦА

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

Попробуйте добавить cellspacing="0" и cellpadding="0" на вашем столе,

Answer 2

Добавить

margin-left:3px; 

к

<td> 

Например,

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

Answer 3

Ваши пространства были вызваны "Лучшее время для вызова" клетки. Оберните эту ячейку двумя линиями, чтобы удалить лишние пробелы.

Answer 4

поскольку ячейка таблицы выровнена по адресу «Лучшее время для звонка:  ». Как об использовании <ul><li>

Answer 5

Способ, которым браузер устанавливает таблицы по умолчанию, каждый столбец имеет размер, чтобы попытаться соответствовать ширине его самого большого дочернего элемента. В этом случае наибольший дочерний элемент представляет собой ячейку таблицы со значением «наилучшее время для вызова», что приводит к тому, что столбец расширяется по ширине для размещения этой длины.

Вы можете указать в первом столбце таблицы фиксированную ширину, чтобы исправить это, что приведет к тому, что ваша длинная линия, «лучшее время для вызова», будет завершена.

В следующем примере я добавил таблицу id, после чего я нацелил первый столбец таблицы с помощью CSS и дал ей width. Я также дал вашей форме «Вопросы/комментарии» ширину, чтобы она соответствовала.

---

Скриншот результата:

---

Демо:

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

 
#qa { 
 
    width: 240px; 
 
}

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

JSFiddle Версия: https://jsfiddle.net/sLv3e8f5/2/

Answer 6

Избавление от таблиц открывает вас в мир возможностей с CSS Styling.

Следующая очень быстрый и грязный пример:

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>