JSFiddle - React, Tailwind, and code Playground

by Matsunaga_Ajike

HTML

<div class="table">
  <table>
    <thead>
      <tr>
        <th>head1</th>
        <th>head2</th>
        <th>head3</th>
        <th>head4</th>
        <th>head5</th>
        <th>head6</th>
        <th>head7</th>
        <th>head8</th>
        <th>head9</th>
        <th>head10</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>body1</td>
        <td>body2</td>
        <td>body3</td>
        <td>body4</td>
        <td>body5</td>
        <td>body6</td>
        <td>body7</td>
        <td>body8</td>
        <td>body9</td>
        <td>body10</td>
      </tr>
      <tr>
        <td>body1</td>
        <td>body2</td>
        <td>body3</td>
        <td>body4</td>
        <td>body5</td>
        <td>body6</td>
        <td>body7</td>
        <td>body8</td>
        <td>body9</td>
        <td>body10</td>
      </tr>
      <tr>
        <td>body1</td>
        <td>body2</td>
        <td>body3</td>
        <td>body4</td>
        <td>body5</td>
        <td>body6</td>
        <td>body7</td>
        <td>body8</td>
        <td>body9</td>
        <td>body10</td>
      </tr>
      <tr>
        <td>body1</td>
        <td>body2</td>
        <td>body3</td>
        <td>body4</td>
        <td>body5</td>
        <td>body6</td>
        <td>body7</td>
        <td>body8</td>
        <td>body9</td>
        <td>body10</td>
      </tr>
      <tr>
        <td>body1</td>
        <td>body2</td>
        <td>body3</td>
        <td>body4</td>
        <td>body5</td>
        <td>body6</td>
        <td>body7</td>
        <td>body8</td>
        <td>body9</td>
        <td>body10</td>
      </tr>
      <tr>
        <td>body1</td>
        <td>body2</td>
        <td>body3</td>
        <td>body4</td>
        <td>body5</td>
        <td>body6</td>
        <td>body7</td>
        <td>body8</td>
        <td>body9</td>
        <td>body10</td>
      <tr>
        <td>body1</td>
        <td>body2</td>
        <td>body3</td>
        <td>body4</td>
        <td>body5</td>
        <td>body6</td>
       ...

CSS

/* スクロールさせる為に表示領域を固定値で用意 */
.table {
  width: 500px;
  height: 300px;
  /* もちろん、scrollでもいいです */
  overflow: auto;
  border: 2px solid;
}
table {
  border-collapse: collapse;
}
th {
  border-right: 1px solid;
}
td {
  padding: 0 20px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}


th {
  top: 0;
  z-index: 20;
  position: sticky;
  background: #eee;
}

tr td:first-child {
  position: sticky;
  left: 0;
  z-index: 10;
  background: #eee;
}

th:first-child {
  left: 0;
}

th:first-child {
  left: 0;
  /* 構造をth、th:first-childよりも上に移動 */
  z-index: 30;
}



th::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-right: 1px solid;
    border-bottom: 1px solid;
}
tbody tr td::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-right: 1px solid;
}