デーブルなどの枠からはみ出してしまう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」