<table>
  <tr>
    <th class="fixed01">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
  </tr>
  <tr>
    <th class="fixed02">見出し</th>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <th class="fixed02">見出し</th>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <th class="fixed02">見出し</th>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <th class="fixed02">見出し</th>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
   <tr>
    <th class="fixed02">見出し</th>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
</table>
table{
  width: 1800px;
}
th,td{
  width: 300px;
  height: 100px;
  vertical-align: middle;
  padding: 0 15px;
  border: 1px solid #ccc;
}
.fixed01,
.fixed02{
  position: sticky;
  top: 0;
  left: 0;
  color: #fff;
  background: #333;
  &:before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
  }
}
.fixed01{
  z-index: 2;
}
.fixed02{
  z-index: 1;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.