2013-09-20 2 views
3

Я разработал эту регистрационную форму. Проблема в том, что между двумя строками слишком много места, то есть части идентификатора и пароля. Как уменьшить пространство?Как уменьшить пространство между строками в таблице html

CSS (внутри HTML/Head/Стиль элементов)

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

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

ответ

0

Использование style="border-collapse: collapse" на столе.

+4

Это не решит проблему. Я попробовал. – Pooja

+0

попробуйте установить поле для tr как 0 –

+0

Вы убедились, что вы применили его к таблице, а не к строкам таблицы? –

2

Это потому, что у вас есть высота стола 150 пикселей, а ряды стали 75px height каждый (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;*/ 

     } 
+0

Ответ должен заканчиваться на «удалить высоту из таблицы». Зачем устанавливать высоты вообще, возможно, создавая новые проблемы, когда вы только что решили? –

Смежные вопросы