• このエントリーをはてなブックマークに追加

2016年03月28日(Mon)

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

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

DOCTYPE宣言の種類によっては、inputtableなどがから少しはみ出してしまう場合があります。
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サイト】

コメント(0件)

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

コメントフォーム

【ソーシャルボタン】


TOP