Question

我设计了这个注册表单。问题是两行之间的空间太大，即id和密码部分。我如何减少空间？

CSS （在HTML /主题/样式元素中）

<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 （内部HTML /正文）

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

Answer 1

那是因为你的桌子高度为150px，每行高度为75px（150/2）。要解决此问题，只需从表中删除高度并设置td元素的高度。例如：

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

        }

Answer 2

在桌子上使用style="border-collapse: collapse"。

如何减少html表中行之间的空间

2 个答案: