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>
           ...

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;
  background-color: #ffffff;
}
.datatable tbody {
}
.datatable tbody td {
  padding: 20px;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
}

.container.type01 .datatable thead th  {
  border-left: 1px solid #ff6600;
  border-right: none;
  border-bottom: 1px solid #ff6600;
}
.container.type01 .datatable thead th:last-child {
  border-right: 1px solid #ff6600;
}