Stickyで行、列ヘッダを固定する

by bc_rikko

HTML

<main class="wrapper">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Channel A</th>
          <th>Channel B</th>
          <th>Channel C</th>
          <th>Channel D</th>
          <th>Channel E</th>
          <th>Channel F</th>
          <th>Channel G</th>
          <th>Channel H</th>
          <th>Channel I</th>
          <th>Channel J</th>
        </tr>
      </thead>
      <tbody>
        <tr><th>0:00</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
        <tr><th>1:00</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
        <tr><th>2:00</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
        <tr><th>3:00</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
        <tr><th>4:00</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
        <tr><th>5:00</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
        <tr><th>6:00</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
        <tr><th>7:00</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
        <tr><th>8:00</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
        <tr><th>9:00</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
        <tr><th>10:00</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
        <tr><th>11:00</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
       ...

CSS

.wrapper {
  width: 500px;
  height: 300px;
  overflow: scroll;
}

table {
  table-layout: fixed;
  width: 100%;
}

th {
  background-color: #666666;
  color: white;  
}

thead tr th {
  width: 100px;
  position: sticky;
  top: 0;
  z-index:1;
}

tbody tr th {
  position: sticky;
  left: 0;
}

th, td {
  padding: 5px 10px;
}