JSFiddle - React, Tailwind, and code Playground

by feechka_patrick

HTML

<div class='wrapper'>
  <table>
    <thead>
        <tr>
            <td>Problem</td>
            <td>Solution</td>
            <td>Solution</td>
            <td>Solution</td>
            <td>Solution</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Problem</td>
            <td>Solution</td>
            <td>Solution</td>
            <td>Solution</td>
            <td>Solution</td>
        </tr> 
        <tr>
            <td>Problem</td>
            <td>Solution</td>
            <td>Solution</td>
            <td>Solution</td>
            <td>Solution</td>
        </tr>
         <tr>
            <td>Problem</td>
            <td>Solution</td>
            <td>Solution</td>
            <td>Solution</td>
            <td>Solution</td>
        </tr>
         <tr>
            <td>Problem</td>
            <td>Solution</td>
            <td>Solution</td>
            <td>Solution</td>
            <td>Solution</td>
        </tr>
         <tr>
            <td>Problem</td>
            <td>Solution</td>
            <td>Solution</td>
            <td>Solution</td>
            <td>Solution</td>
        </tr>
         <tr>
            <td>Problem</td>
            <td>Solution</td>
            <td>Solution</td>
            <td>Solution</td>
            <td>Solution</td>
        </tr>
        
    </tbody>
</table>
</div>

CSS

table {
    background-color: #aaa;
}
tbody {
    background-color: #ddd;
    height: 100px;
    overflow: auto;
}
td {
    padding: 3px 10px;
}

thead > tr, tbody{
    display:block;}

.wrapper {
  width: 300px;
  overflow: auto;
}