JSFiddle - React, Tailwind, and code Playground

by yokano

HTML

<table id="table1">
    <caption align="bottom">border-collapse: collapse</caption>
    <tr>
        <th>データ１</th>
        <td>りんご</td>
    </tr>
    <tr>
        <th>データ２</th>
        <td>ゴリラ</td>
    </tr>
    <tr>
        <th>データ３</th>
        <td>ラッパ</td>
    </tr>
</table>

<table id="table2">
    <caption align="bottom">border-collapse: separate</caption>
    <tr>
        <th>データ１</th>
        <td>りんご</td>
    </tr>
    <tr>
        <th>データ２</th>
        <td>ゴリラ</td>
    </tr>
    <tr>
        <th>データ３</th>
        <td>ラッパ</td>
    </tr>
</table>

CSS

table {
    margin: 20px;
}

#table1 {
    border-style: solid;
    border-radius: 10px;
    border-collapse: collapse;
}

#table2 {
    border-style: solid;
    border-radius: 10px;
    border-collapse: separate;
}