CODEWITHSUNDEEP
htmlcellpadding
user1175551
user1175551

Reputation: 241

HTML table cell padding with submit button

When a submit button is added inside the table, the cell padding gets larger throughout the entire table. The button is at the very top of the cell. I want it to be at the center with less cell padding. Nothing is really working for me... 

<html>    
    <head>    
        <style type = "text/css">    
            td {border:1px solid black;}    
        </style>    
    </head>    
    <body>    
        <table>    
            <tr>
                <td>Fish</td>
                <td>Salmon</td>
                <td>Trout</td>
                <td>Steak</td>
                <td><form><input type = "submit"></input></form></td>
            </tr>    
        </table>    
    </body>    
</html>

Upvotes: 1

Views: 9855

Answers (3)

XTGX
XTGX

Reputation: 114

you can try this 

<td><form><input type = "submit" style="margin:0;"></input></form></td>

Upvotes: 0

webNeat
webNeat

Reputation: 2828

One solution can be : 

<html>

<head>

<style type = "text/css">

td {
    border:1px solid black;
}

td form {
    display : table-cell;
    vertical-align: middle;
    margin : 0;
    padding : 0;
}

</style>

</head>

<body>

<table>

<tr>
<td>Fish</td>
<td>Salmon</td>
<td>Trout</td>
<td>Steak</td>
<td><form><input type = "submit" /></form></td>
</tr>

</table>

</body>

</html>

try it :D

Upvotes: 0

compid
compid

Reputation: 1323

This is due to the form element having some default margins and padding. You can reset those back to zero by adding the following to your stylesheet:

form {margin: 0; padding:0;}

Then you can style the rest of the table normally. Consider using some sort of CSS reset script, like Eric Meyer's:

http://meyerweb.com/eric/tools/css/reset/

Upvotes: 4

Related Questions