JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<!-- 試験対策: tableデザイン -->
<table cellspacing="2" cellpadding="4">
    <caption>セントラルジム料金表</caption>
    <tr>
        <th></th>
        <th>曜日</th>
        <th>OPEN〜18:00</th>
        <th>18:00〜CLOSE</th>
        <th>1日パス</th>
    </tr>
    <tr>
        <th rowspan="2">一般</th>
        <td>平日</td>
        <td class="price">1,500円</td>
        <td class="price">1,200円</td>
        <td class="price">2,000円</td>
    </tr>
    <tr>
        <td>土日祝</td>
        <td class="price">1,700円</td>
        <td class="price">1,400円</td>
        <td class="price">2,500円</td>
    </tr>
    <tr>
        <th rowspan="2">学生</th>
        <td>平日</td>
        <td class="price">1,200円</td>
        <td class="price">1,000円</td>
        <td class="price">1,500円</td>
    </tr>
    <tr>
        <td>土日祝</td>
        <td class="price">1,400円</td>
        <td class="price">1,600円</td>
        <td class="price">2,000円</td>
    </tr>
    <tr>
        <th rowspan="2">小学生以下</th>
        <td>平日</td>
        <td class="price">1,000円</td>
        <td class="price">800円</td>
        <td class="price">1,200円</td>
    </tr>
    <tr>
        <td>土日祝</td>
        <td class="price">1,200円</td>
        <td class="price">1,000円</td>
        <td class="price">1,500円</td>
    </tr>
    <tr>
        <th>レディースデイ</th>
        <td>毎週木曜日</td>
        <td colspan="3" class="price">1,000円</td>
    </tr>
</table>

CSS

table {
    border: 1px solid #cccccc;
}
th {
    background-color: #ffcc33;
    color: #fff;
}
td {
    border: 1px solid #cccccc; 
}
.price {
    text-align: right;
}