너비가 100 % 인 입력 요소가 테이블의 셀 테두리를 넘는 이유를 아는 사람이 있습니까?
아래 입력 상자의 간단한 예에서 테이블의 셀 테두리를 넘어 가면 결과는 끔찍합니다. 이것은 테스트되었으며 Firefox, IE7 및 Safari에서 동일한 방식으로 발생합니다.
당신에게 의미가 있습니까? 내가 뭔가를 놓치고 있습니까? 가능한 해결책에 대해 알고 있습니까?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <!-- don't use closing slash in meta tag, it breaks HTML4.01 transitional -->
<title>Test input text in table</title>
<style type="text/css">
table {border-top: 1px solid #ff0000; border-left: 1px solid #ff0000;}
table td {border-right: 1px solid #00ff00; border-bottom: 1px solid #00ff00;}
input[type="text"] {width: 100%;} /* removing this would make input not to go over cells border, but they would be too short, I want them to fit cells size */
</style>
</head><body>
<table cellpadding="0" cellspacing="0">
<tr>
<td><p>column one hello babe babe babe</p></td>
<td><p>column two hello babe more</p></td>
<td><p>column three hello babe more and more</p></td>
</tr>
<tr>
<td><input type="text" value="test"></td>
<td><input type="text" value="test"></td>
<td><input type="text" value="test"></td>
</tr>
</table>
</body></html>
form과label의와input, 안쪽의ul나ol. 즉, 적어도 약간 더 의미가 있습니다. 물론 그래도, 당신은을 사용한다form당신이 함께 스틱을 할 경우에도table.