我想凍結/修復表格的第一行和前兩列。下面的代碼有效，只是當從左向右滾動時，左邊和右邊的前兩列消失了。有人推薦嗎？
css和html
<html>
<center><h1>testing</h1></center>
<head><meta name="xx" content="HTML" />
<title>testing</title>
<body bgcolor=aliceblue>
<font color=brown><b>
<style type="text/css">
table.sample {
border-width: thin thin thin thin;
border-spacing: 4px;
border-style: ridge ridge ridge ridge;
border-color: black black black black;
border-collapse: collapse;
background-color: lightyellow;
text-align: center;
word-break: break-all;
overflow: scroll;
width: 400;
table-layout:fixed;
}
table.sample th {
border-width: 2px 2px 2px 2px;
padding: 3px 3px 3px 3px;
border-style: ridge ridge ridge ridge;
border-color: 1px solid black;
background-color: aqua;
-moz-border-radius: 3px 3px 3px 3px;
text-align: center;
word-break: break-all;
}
table.sample td {
border-width: 2px 2px 2px 2px;
padding: 3px 3px 3px 3px;
border-style: ridge ridge ridge ridge;
border-color: black black black black;
-moz-border-radius: 3px 3px 3px 3px;
text-align: center;
word-break: break-all;
}
thead th {
top: 0;
position: sticky;
z-index: 20;
background-color: aqua;
border-color: 1px solid black;
}
.category_col {
left: 0;
position: sticky;
background-color: lightyellow;
border-color: 1px solid black;
border-left-color: 1px solid black;
}
.stage_col {
left: 150;
position: sticky;
background-color: lightyellow;
border-color: 1px solid black;
border-left-color: 1px solid black;
}
.fixed_header {
z-index: 50;
}
</style>
<table class="sample">
<thead>
<tr>
<th width="150" class="category_col fixed_header">Category</th>
<th width="150" class="stage_col fixed_header"><font color=brown>Stages </font></th>
<th width="350"> a </th>
<th width="350"> b </th>
<th width="350"> c </th>
<th width="350"> d </th>
<th width="350"> e </th>
<th width="350"> f </th>
<th width="350"> g </th>
</tr>
</thead>
<tr>
<td class="category_col" scope="row" rowspan="8"><b>Info</b></td>
<td class="stage_col" scope="row"><b>Stage 1</b>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td class="stage_col" scope="row"><b>Stage2</b>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td class="stage_col" scope="row"><b>Stage3</b>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td class="stage_col" scope="row"><b>Stage4</b>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td class="stage_col" scope="row"><b>Stage5</b>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td class="stage_col" scope="row"><b>Stage6</b>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td class="stage_col" scope="row"><b>Stage7</b>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td class="stage_col" scope="row"><b>Stage8</b>
<td>y</td>
<td>y</td>
<td>y</td>
<td>y</td>
<td>y</td>
<td>y</td>
<td>y</td>
</tr>
</table> <br><br>
</html>