今回はCSSでテーブルを作る方法について紹介します。
【CSS】テーブルの作り方について
テーブルの完成形はこちら。
レスポンシブの際には、横にスクロールできるようにしました。
HTML
<!-- テーブル -->
<div class="container">
<div class="wrap">
<table>
<tr>
<th>プログラミング</th>
<td>ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。</td>
<td>ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。</td>
<td>ダミーテキストが入ります。ダミーテキストが入ります。</td>
<td>ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。</td>
</tr>
<tr>
<th>HTML</th>
<td>ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。</td>
<td>ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。</td>
<td>ダミーテキストが入ります。ダミーテキストが入ります。</td>
<td>ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。</td>
</tr>
<tr>
<th>CSS</th>
<td>ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。</td>
<td>ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。</td>
<td>ダミーテキストが入ります。ダミーテキストが入ります。</td>
<td>ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。</td>
</tr>
<tr>
<th>JavaScript</th>
<td>ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。</td>
<td>ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。</td>
<td>ダミーテキストが入ります。ダミーテキストが入ります。</td>
<td>ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。</td>
</tr>
</table>
</div>
</div>
CSS
.container {
overflow: hidden;
}
.wrap {
overflow-x: scroll;
}
table {
max-width: 1000px;
margin: 0 auto;
overflow-x: scroll;
width: max-content;
}
table th {
text-align: center;
background-color: #efefef;
vertical-align: middle;
width: 15%;
}
table th,
table td {
padding: 10px;
border: 1px solid black;
}
table td {
width: 21.25%;
line-height: 1.5;
}
