CODEWITHSUNDEEP
css
Pooja
Pooja

Reputation: 528

how to reduce space between rows in a html table

I have designed this signup form. The problem is that there is too much space between the two rows i.e. the id and password parts.How do I reduce the space?

CSS (inside HTML / Head / Style elements)

<html>
<head>
<title>Signup</title>
<style>
div
{
    position:absolute;
    top:300px;
    left:550px;
    width:200px;
}

table
{   
    height:150px;
    border:1px solid black;
    border-radius:10px;
    box-shadow:0px 0px 2px #777;

}
td
{
    padding:10px;

}

 .ip
{
    border-radius:5px;
    border:1px solid grey;

}

 .label
{
    color:#EE6AA7;
    font-family:Helvetica;
    font-size:17px;
}
</style>
</head>

HTML(Inside HTML/Body)

<body>
<div>
<form>
<table>
<tr>
    <td class="label">Id</td>
    <td><input type="text" name="id" class="ip"></td>
</tr>
<tr>
    <td class="label">Password</td>
    <td><input type="text" name="pswrd" class="ip"></td>
</tr>
</table>
</form>
</div>
</body>
</html>

Upvotes: 5

Views: 13334

Answers (2)

Makc
Makc

Reputation: 1132

That's because you have table height 150px and rows became 75px height each (150/2). To solve this problem, just remove height from the table and set height for td elements. For example:

  table{
            padding: 10px;
            /*height:150px;*/
            border:1px solid black;
            border-radius:10px;
            box-shadow:0px 0px 2px #777;
        }
    td{
            height:20px;
            /*padding:10px;*/

        }

Upvotes: 2

Prinz Km
Prinz Km

Reputation: 323

Use style="border-collapse: collapse" on the table.

Upvotes: 1

Related Questions