Как убрать пробел между данными таблицы в строке таблицы в HTML? - PullRequest
Новая
       11

Как убрать пробел между данными таблицы в строке таблицы в HTML?

2 голосов
/ 14 февраля 2010

Я пытаюсь выяснить, как убрать лишний пробел между данными таблицы в строке таблицы в HTML. Например, в приведенном ниже коде есть дополнительное пространство между данными таблицы «Имя» и данными таблицы «имя ввода», когда код просматривается в моем браузере IE. Вот пример: 

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

Мне нужно, чтобы текстовое поле ввода было достаточно близко к категории (т. Е. «Имя»). У меня есть требования не включать рамку таблицы, cellpadding 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>

Ответы [ 6 ]

1 голос
/ 14 февраля 2010

С помощью 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>
1 голос
/ 14 февраля 2010

Звучит так, будто вам нужно выровнять текст по правому краю в первом столбце. Вы можете сделать это так: 

<td align='right'>

или css 

<td class='label'>

и стиль будет: 

.label {
  text-align:right;
}
1 голос
/ 14 февраля 2010

Прежде всего, поставьте colspan="2" на th: 

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

Без этого th будет излишне растягивать td s под ним (то есть левый столбец). colspan="2" будет растягивать th по ширине всей таблицы. Это должно решить хотя бы часть проблемы и сблизить td. Если этого все еще недостаточно, вы можете определить фиксированную ширину для левого столбца, установив атрибут width для любого из td s в нем, например ::

<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 являются лишь примерами, вам придется немного поэкспериментировать, чтобы найти оптимальные значения.

1 голос
/ 14 февраля 2010

Я предполагаю, что вы хотите, чтобы левый столбец регулировался по ширине, чтобы он был таким же широким, как его самая длинная запись. На самом деле это интересный вопрос.

Что я обычно делаю:

  • присвоить левому столбцу атрибут стиля white-space: nowrap

  • задает ширину правого столбца, которая на немного больше, чем должна быть , например. возможно 70%. Это вопрос попытки.

Результатом является то, что правый столбец "давит" на левый столбец, ширина которого не указана. Левый столбец будет сдаваться, но только до длины его содержимого.

Мне интересно посмотреть, есть ли какое-то другое, более чистое решение, которое я пропустил за последние восемь лет :)

Пример кода: 

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

этого должно быть достаточно, чтобы установить ширину в первом ряду.

1 голос
/ 14 февраля 2010 
<table border="0" cellpadding="2" cellspacing="0" width="65%">
...
</table>
1 голос
/ 14 февраля 2010

Вам нужно использовать CSS для управления расстоянием между ячейками.

Вот хороший учебник с примерами:

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

...