htmlcsspaddinginput-fieldcellpadding

CSS: remove all padding from cell with input field

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.

Solution

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