JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="container">
        <table class="datatable">
            <thead>
                <tr>
                    <th>00</th>
                    <th>00</th>
                    <th>00</th>
                    <th>00</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
            ...

CSS

.container {height: 200px; overflow: auto; position: relative; margin:20px;}
.datatable {  width: 100%; border-collapse: collapse; }
.container.type01 .datatable {border-collapse: separate;}
.datatable thead {position: sticky; top: 0; left: 0; z-index: 9;background-color: #ffffff;}
.datatable thead th {border: 1px solid #ff6600; padding: 10px; }
.datatable tbody {}
.datatable tbody td {padding: 20px; border-left: 1px solid #000; border-bottom: 1px solid #000;}

.container.type02 .datatable thead th {
  
}