2024年01月29日 23:01
テーブルの幅を固定する3
■HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプル</title>
<style>
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>サンプル</th>
<th>サンプル</th>
<th>サンプル</th>
</tr>
<tr>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
</tr>
<tr>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
</tr>
</table>
</body>
</html>
■イメージ
■説明
「width: 50%;」は、テーブルを記事内の50/100までの大きさにする。
「width: 100%;」は、テーブルを記事内の100/100まで大きくする。
