CSS paddingでtableのtd要素の内側の余白を指定するサンプル
環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit
構文
div要素のクラス名 td {
padding:値
}
パディング(padding)は、コンテンツエリアとボーダーの間の余白です。
要素の上下左右の余白を指定します。
セルの内側の余白を調節するにはtdにpaddingを指定します。
使用例
<!DOCTYPE html>
<html>
<head>
<style>
/*table要素のクラスの定義*/
.cft {
border: 1px solid skyblue;
}
/* tdタグにpadding*/
.cft td{
padding :10px;
border: 1px solid red;
}
</style>
</head>
<body>
<table class="cft">
<tr>
<td>A11</td>
<td>A12</td>
</tr>
<tr>
<td>B11</td>
<td>B12</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
/*table要素のクラスの定義*/
.cft {
border: 1px solid skyblue;
}
/* tdタグにpadding*/
.cft td{
padding :10px;
border: 1px solid red;
}
</style>
</head>
<body>
<table class="cft">
<tr>
<td>A11</td>
<td>A12</td>
</tr>
<tr>
<td>B11</td>
<td>B12</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html> <html> <head> <style> /*table要素のクラスの定義*/ .cft { border: 1px solid skyblue; } /* tdタグにpadding*/ .cft td{ padding :10px; border: 1px solid red; } </style> </head> <body> <table class="cft"> <tr> <td>A11</td> <td>A12</td> </tr> <tr> <td>B11</td> <td>B12</td> </tr> </table> </body> </html>