<div class="table-container">
      <table>
          <thead>
              <tr>
                  <th class="sticky-left">商品ID</th>
                  <th>項目1</th>
                  <th>項目2</th>
                  <th>項目3</th>
                  <th>項目4</th>
                  <th>項目5</th>
                  <th>項目6</th>
                  <th>項目7</th>
                  <th>項目8</th>
                  <th>項目9</th>
                  <th>項目10</th>
                  <th>項目11</th>
                  <th>項目12</th>
                  <th>項目13</th>
                  <th>項目14</th>
                  <th>項目15</th>
                  <th>項目16</th>
                  <th>項目17</th>
                  <th>項目18</th>
                  <th>項目19</th>
                  <th>項目20</th>
              </tr>
          </thead>
          <tbody>
              
              <tr>
                  <td class="sticky-left">001</td>
                  <td>データ1</td>
                  <td>データ2</td>
                  <td>データ3</td>
                  <td>データ4</td>
                  <td>データ5</td>
                  <td>データ6</td>
                  <td>データ7</td>
                  <td>データ8</td>
                  <td>データ9</td>
                  <td>データ10</td>
                  <td>データ11</td>
                  <td>データ12</td>
                  <td>データ13</td>
                  <td>データ14</td>
                  <td>データ15</td>
                  <td>データ16</td>
                  <td>データ17</td>
                  <td>データ18</td>
                  <td>データ19</td>
                  <td>データ20</td>
              </tr>
           
              <tr>
                  <td class="sticky-left">002</td>
                  <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>
                  <td>データK</td>
                  <td>データL</td>
                  <td>データM</td>
                  <td>データN</td>
                  <td>データO</td>
                  <td>データP</td>
                  <td>データQ</td>
                  <td>データR</td>
                  <td>データS</td>
                  <td>データT</td>
              </tr>
          </tbody>
      </table>
  </div>
      table {
            border-collapse: collapse;
            width: 100%;
            min-width: 2000px; 

        }

        th, td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
        }

        th {
          
            top: 0;
            background-color: #f4f4f4;
        }

        .table-container {
            overflow-x: auto; 
            max-height: 500px; 
        }

        th.sticky-left, td.sticky-left {
            position: sticky;
          top: 0;
            left: 0;
            background-color: #f9f9f9;
           border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
            z-index: 1;
        }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.