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.