CSS: удалить все отступы из ячейки с полем ввода

Question

У меня есть строка таблицы с полем ввода в каждой ячейке, которая используется для фильтрации столбца.

Как я могу удалить все отступы от тд в этой строке, чтобы не было лишнего пробела между границами поля ввода и тд, содержащими их? В настоящее время поле ввода, содержащее тд, выглядит намного больше из-за этого.

Примечание: это просто необходимо для одной конкретной строки, все остальные строки останутся в стандартном формате.

Мой тр выглядит так:

// ...
<tbody>
    <tr>
        <td><input type="text" name="input1" /></td>
        <td><input type="text" name="input2" /></td>
        <td><input type="text" name="input3" /></td>
    </tr>
// ...
</tbody>

Большое спасибо за любую помощь в этом, Тим.

Answer 1

Сначала добавьте класс в:

<tbody>
    <tr class="noPadding">
        <td><input type="text" name="input1" /></td>
        <td><input type="text" name="input2" /></td>
        <td><input type="text" name="input3" /></td>
    </tr>
</tbody>

Тогда в вашем CSS:

.noPadding td { padding: 0; }

Если вы обнаружите, что вы по-прежнему получаете дополнительный интервал, возможно, к самим входам могут быть применены поля (в зависимости от других настроек CSS / браузера), если так стоит попробовать:

.noPadding td input { margin: 0; }

Надеюсь это поможет.

Answer 2

Похоже, то, что вы видите, это поле, созданное полями формы по умолчанию, попробуйте это:

Css для размещения в вашем стиле теги в голове:

.noMargin { margin: 0; }

Подсказка: вы можете присвоить марже минус значение, чтобы царствовать в пространстве больше, в этом случае:

.noMargin { margin: -2px; }

работал для меня (с использованием сафари, но зависит от браузера)

Ваш HTML:

<tbody>
<tr>
    <td><input type="text" name="input1" class="noMargin" /></td>
    <td><input type="text" name="input2" class="noMargin" /></td>
    <td><input type="text" name="input3" class="noMargin" /></td>
</tr>
</tbody>

Надеюсь, это поможет.

Answer 3

Вы можете использовать jquery для удаления отступов всех таблиц, где есть поля ввода текста

$(function () {
    $('.myTable').find(':text').parent('td').css('padding','0');
});

как показано в http://jsfiddle.net/WTBsp/1/