JSFiddle - React, Tailwind, and code Playground

HTML

<table class="t1">
    <caption> border-collapse: collapse</caption>
    <tr>
        <td>사과</td><td>배</td><td>오렌지</td>
    </tr>    
    <tr>
        <td>5</td><td>54</td><td>35</td>
    </tr>    
</table>    

<table class="t2">
    <caption>  border-collapse: separate</caption>
    <tr>
        <td>사과</td><td>배</td><td>오렌지</td>
    </tr>    
    <tr>
        <td>5</td><td>54</td><td>35</td>
    </tr>    
</table>

CSS

table {
    background-color: #eee;
    width: 300px;
    margin: 20px;
}
td {
    border: 1px solid #ccc;
    padding: 10px;
}
.t1 {
    border-collapse: collapse;
    border-spacing: 1em 3em;
}
.t2 {
    border-collapse: separate;
    border-spacing: 1em 3em;    
}