WEB帳
デーブルなどの枠からはみ出してしまうinputやtextareaをbox-sizingではみ出し防止

DOCTYPE宣言の種類によっては、inputがtableなどがから少しはみ出してしまう場合があります。
box-sizingプロパティを使ってボックスサイズの算出方法を指定しはみ出しを防止します。

HTML

<table>
	<tr>
    	<th>項目名</th>
        <td><input type="text" /></td>
    </tr>
    <tr>
    	<th>項目名</th>
        <td><textarea></textarea></td>
    </tr>
</table>

はみ出す例

CSSと表示例のサンプル

css

<style>
table{ width:100%; border-collapse:collapse; }
th, td{ border:1px solid #e0e0e0; padding:5px; }
th{ background:#f0f0f0; }
textarea{ width:100%; height:5em; }
input, textarea{ width:100%; padding:5px; }
</style>

▼ 表示例

box-sizingの使用例

9行目から11行目を追記するとはみ出しが抑えられます。

css

<style>
table{ width:100%; border-collapse:collapse; }
table th, table td{ border:1px solid #e0e0e0; padding:5px; }
table th{ background:#f0f0f0; }
textarea{ width:100%; height:5em; }
input, textarea{
width:100%;
padding:5px;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Chrome, Safari */
}
</style>

▼ box-sizing を使用した表示例

【参考Webサイト】

• とりあえず「box-sizing:border-box」

コメント（1件）

デーブルなどの枠からはみ出してしまうinputやtextareaをbox-sizingではみ出し防止に対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。 お気軽にコメントしてください。

• 

  SD

  助かりました〜＾＾

  2022年6月9日 12:09 AM

  返信

【ソーシャルボタン】

• 
• Tweet