Có ai biết tại sao các phần tử đầu vào có chiều rộng 100% đi qua đường viền ô của bảng không.
Trong ví dụ đơn giản dưới đây, hộp nhập liệu đi qua đường viền ô của bảng, kết quả thật kinh khủng. Điều này đã được thử nghiệm và nó xảy ra theo cách tương tự trên: Firefox, IE7 và Safari.
Nó có ý nghĩa với bạn không? Tôi đang thiếu một cái gì đó, bạn có biết về một giải pháp khả thi?
<!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>
formvới cáclabels vàinputs bên trong aulhoặcol. nghĩa là, ít nhất là ngữ nghĩa hơn một chút. Mặc dù vậy, chắc chắn bạn nên sử dụng mộtform, ngay cả khi bạn gắn bó vớitable.