CSS: remove all padding from cell with input field

Question

I have a table row with an input field in each cell that is used to filter a column.

How can I remove all padding from the td's in this row so that there is no extra space between the input field borders and the td's containing them ? Currently the td's containing input field appear much bigger because of this.

Note: This is just needed for one specific row, all other rows will stay standard-formatted.

My tr looks like this:

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

Many thanks for any help with this, Tim.

Answer 1

Firstly add a class to the :

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

Then in your CSS:

.noPadding td { padding: 0; }

If you find you're still getting extra spacing there may be some margins applied to the inputs themselves (depends on your other CSS / browser defaults) if so worth trying:

.noPadding td input { margin: 0; }

Hope this helps.

Answer 2

It looks like what you're seeing is margin created by the form fields by default, try this:

Css to be placed in your style tags in the head:

.noMargin { margin: 0; }

Hint: you can assign margin a minus value to reign in the space more, in this instance:

.noMargin { margin: -2px; }

worked for me (using safari, but will vary by browser)

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

I hope this helps.

Answer 3

You can use jquery to remove padding of all the table tds where it has text input boxes

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

as shown in http://jsfiddle.net/WTBsp/1/