CSS tableにmarginを指定して外側の余白を表示する

2022年10月27日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit

構文
margin : 値
上下左右を指定します。
marginは、要素の外側の余白で隣の要素と距離を取ります。
marginで左右をautoにすると中央寄せが可能です。

使用例

<!DOCTYPE html>

<html>

<head>

<style>

/*div要素のクラスcft*/

.cft {

background: skyblue;

overflow: hidden;

}

.cft table{

/*外側の余白左右 auto*/

margin: 15px auto 10px;

}

</style>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

<!DOCTYPE html> <html> <head> <style> /*div要素のクラスcft*/ .cft { background: skyblue; overflow: hidden; } .cft table{ /*外側の余白左右 auto*/ margin: 15px auto 10px; } </style> </head> <body> <div class="cft"> <table border="1"> <tr> <td>AA11</td> <td>AA12</td> </tr> <tr> <td>BB11</td> <td>BB12</td> </tr> </table> </div> </body> </html>

<!DOCTYPE html>
<html>
<head>
<style>
/*div要素のクラスcft*/
.cft {
    background: skyblue;
    overflow: hidden;
}
.cft table{
/*外側の余白 左右 auto*/
   margin: 15px auto 10px;
}
</style>
</head>
<body>
<div class="cft">
    <table border="1">
        <tr>
            <td>AA11</td>
            <td>AA12</td>
        </tr>
        <tr>
            <td>BB11</td>
            <td>BB12</td>
        </tr>
    </table>
</div>

</body>
</html>

CSS

Posted by arkgame

関連投稿: