<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.