BinaryDevelop
  1. ホーム
  2. html

[解決済み] 幅100%のHTML入力テキストボックスがテーブルセルをオーバーフローする

2022-10-12 17:58:06

質問

幅100%のinput要素がテーブルのセルの枠を越えてしまうのはなぜかわかりますか？

以下の簡単な例では、入力ボックスがテーブルのセルの境界を越えてしまい、結果はひどいものです。これはテストされ、同じ方法で発生します。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>

どのように解決するのですか？

CSS3の box-sizing プロパティを使用して、外部パディングとボーダーを含めることができます。 

input[type="text"] {
     width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
}

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します