【CSS】テーブルの作り方について

CSS

今回は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;
}