I wanted to freeze/fix the table first row and first 2 columns. Below code works, only that when scrolling left to right, the first 2 columns left and right border are gone. Any commend?
<html>
<style type="text/css">
table.sample {
border-width: thin thin thin thin;
border-spacing: 4px;
border-style: ridge ridge ridge ridge;
border-color: black;
border-collapse: collapse;
background-color: lightyellow;
text-align: center;
word-break: break-all;
overflow: scroll;
width: 400px;
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: 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;
-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: black;
}
.category_col {
left: 0;
position: sticky;
background-color: lightyellow;
border-color: black;
border-left-color: black;
border-right-color: black;
}
.stage_col {
left: 150px;
position: sticky;
background-color: lightyellow;
border-color: black;
border-left-color: black;
border-right-color: 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>
<html>
<style type="text/css">
table.sample {
border-width: thin thin thin thin;
border-spacing: 4px;
border-style: ridge ridge ridge ridge;
border-color: black;
border-collapse: collapse;
background-color: lightyellow;
text-align: center;
word-break: break-all;
overflow: scroll;
width: 400px;
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: 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;
-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: black;
}
.category_col {
left: 0;
position: sticky;
background-color: lightyellow;
border-color: black;
border-left-color: black;
border-right-color: black;
}
.stage_col {
left: 150px;
position: sticky;
background-color: lightyellow;
border-color: black;
border-left-color: black;
border-right-color: 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>
