box-sizing

ブログBlog

こんばんは、東郷です。

tableで表を作る際、ブラウザや印刷画面によってはtableの境界線がずれて

レイアウトが崩れることがあるのですが、

解決方法を探す過程でbox-sizingプロパティについて調べたのでご紹介します。

box-sizingは要素のサイズの算出方法を指定できるプロパティです。

例えばtableのtdのサイズをCSSで以下のように指定します。

table td {
　　padding:20px;
    width:100px;
　　background: #000000;
}

上記の記述だとwidth:100px;の外側にpaddingの幅が足されて

実際のtdのサイズは140pxになります。

tdのサイズを100pxに抑えたい時は以下のように記述します。

table td {
　　padding:20px;
    width:100px;
　　background: #000000;
    box-sizing: border-box;
}

「box-sizing: border-box;」を加えることで、

paddingを含めてwidthは100pxを維持できます。

tableの境界線がwidthの内側に指定されるためずれなくなるそうです。