Html Question posted in
Some basic documentation can be found here.

How do I create an HTML table with a fixed/frozen first column and a scrollable body?

I need a simple CSS solution, in which I will be able to freeze my heading which in first column, and a scrollable body. I know there are similar question like :

Example 1 and Example 2

But all questions/ Example I have searched have following points in common.

  • Header is first row of table
  • They are not nested table.

However I have following implementation.

  • Header in first row
  • Nested table

Following is my sample html code

<table>
<tbody>
<tr>
<th> </th>
<td>
<div>
<table>
<tbody>
<tr>
<td>
<div>
<div><label></label>
<div>
<div>
<table>
<tbody>
<tr>
<td>
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="innerWrapEl"><span data-ref="displayEl"><input autocomplete="off" disabled="disabled" name="boolean_26F" type="checkbox" value="1" data-ref="inputEl" data-componentid="f_c5278A92976E44C4D9C24EF8B866E34C026F_4_1" /></span><label for="f_c5278A92976E44C4D9C24EF8B866E34C026F_4_1-inputEl" data-ref="boxLabelEl"></label></div>
<input hidden="" autocomplete="off" name="~boolean_26F" type="text" value="0" data-ref="hiddenCheckBoxEl" data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C026F_4_1" /><span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</td>
<td>
<div data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C0270_4_1">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div tabindex="-1" data-ref="inputEl">Bind Selected</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<div>
<table>
<tbody>
<tr>
<td>
<div data-cmpid="f_c4F2659E6F1F94613B69919069140626826F_4_2">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="containerEl">
<table cellpadding="0" data-ref="innerCt">
<tbody>
<tr>
<td>
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="innerWrapEl"><span data-ref="displayEl"><input autocomplete="off" disabled="disabled" name="boolean_26F_1" type="checkbox" value="1" data-ref="inputEl" data-componentid="f_c4F2659E6F1F94613B69919069140626826F_4_2" /></span><label for="f_c4F2659E6F1F94613B69919069140626826F_4_2-inputEl" data-ref="boxLabelEl"></label></div>
<input hidden="" autocomplete="off" name="~boolean_26F_1" type="text" value="0" data-ref="hiddenCheckBoxEl" data-cmpid="f_c4F2659E6F1F94613B69919069140626826F_4_2" /><span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</td>
<td>
<div data-cmpid="f_c4F2659E6F1F94613B699190691406268270_4_2">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div tabindex="-1" data-ref="inputEl">Bind Selected</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<div>
<table>
<tbody>
<tr>
<td>
<div data-cmpid="f_cE52D70F270424B93AD29B0D72DE0290B26F_4_3">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="containerEl">
<table cellpadding="0" data-ref="innerCt">
<tbody>
<tr>
<td>
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="innerWrapEl"><span data-ref="displayEl"><input autocomplete="off" disabled="disabled" name="boolean_26F_2" type="checkbox" value="1" data-ref="inputEl" data-componentid="f_cE52D70F270424B93AD29B0D72DE0290B26F_4_3" /></span><label for="f_cE52D70F270424B93AD29B0D72DE0290B26F_4_3-inputEl" data-ref="boxLabelEl"></label></div>
<input hidden="" autocomplete="off" name="~boolean_26F_2" type="text" value="0" data-ref="hiddenCheckBoxEl" data-cmpid="f_cE52D70F270424B93AD29B0D72DE0290B26F_4_3" /><span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</td>
<td>
<div data-cmpid="f_cE52D70F270424B93AD29B0D72DE0290B270_4_3">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div tabindex="-1" data-ref="inputEl">Bind Selected</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<div>
<table>
<tbody>
<tr>
<td>
<div data-cmpid="f_c3368052A24774E088CFF7856EBF11D1326F_4_4">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="containerEl">
<table cellpadding="0" data-ref="innerCt">
<tbody>
<tr>
<td>
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="innerWrapEl"><span data-ref="displayEl"><input autocomplete="off" disabled="disabled" name="boolean_26F_3" type="checkbox" value="1" data-ref="inputEl" data-componentid="f_c3368052A24774E088CFF7856EBF11D1326F_4_4" /></span><label for="f_c3368052A24774E088CFF7856EBF11D1326F_4_4-inputEl" data-ref="boxLabelEl"></label></div>
<input hidden="" autocomplete="off" name="~boolean_26F_3" type="text" value="0" data-ref="hiddenCheckBoxEl" data-cmpid="f_c3368052A24774E088CFF7856EBF11D1326F_4_4" /><span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</td>
<td>
<div data-cmpid="f_c3368052A24774E088CFF7856EBF11D13270_4_4">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div tabindex="-1" data-ref="inputEl">Bind Selected</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<th> </th>
<td>
<div>
<table>
<tbody>
<tr>
<td>
<div data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C0272_4_1">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="containerEl">
<table cellpadding="0" data-ref="innerCt">
<tbody>
<tr>
<td>
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="innerWrapEl"><span data-ref="displayEl"><input autocomplete="off" checked="checked" name="boolean_272" type="checkbox" value="1" data-ref="inputEl" data-componentid="f_c5278A92976E44C4D9C24EF8B866E34C0272_4_1" /></span><label for="f_c5278A92976E44C4D9C24EF8B866E34C0272_4_1-inputEl" data-ref="boxLabelEl"></label></div>
<input hidden="" autocomplete="off" name="~boolean_272" type="text" value="1" data-ref="hiddenCheckBoxEl" data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C0272_4_1" /><span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</td>
<td>
<div data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C0273_4_1">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div tabindex="-1" data-ref="inputEl">Option 1</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<div>
<table>
<tbody>
<tr>
<td>
<div data-cmpid="f_c4F2659E6F1F94613B699190691406268272_4_2">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="containerEl">
<table cellpadding="0" data-ref="innerCt">
<tbody>
<tr>
<td>
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="innerWrapEl"><span data-ref="displayEl"><input autocomplete="off" name="boolean_272_1" type="checkbox" value="1" data-ref="inputEl" data-componentid="f_c4F2659E6F1F94613B699190691406268272_4_2" /></span><label for="f_c4F2659E6F1F94613B699190691406268272_4_2-inputEl" data-ref="boxLabelEl"></label></div>
<input hidden="" autocomplete="off" name="~boolean_272_1" type="text" value="0" data-ref="hiddenCheckBoxEl" data-cmpid="f_c4F2659E6F1F94613B699190691406268272_4_2" /><span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</td>
<td>
<div data-cmpid="f_c4F2659E6F1F94613B699190691406268273_4_2">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div tabindex="-1" data-ref="inputEl">Option 2</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<div>
<table>
<tbody>
<tr>
<td>
<div data-cmpid="f_cE52D70F270424B93AD29B0D72DE0290B272_4_3">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="containerEl">
<table cellpadding="0" data-ref="innerCt">
<tbody>
<tr>
<td>
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="innerWrapEl"><span data-ref="displayEl"><input autocomplete="off" name="boolean_272_2" type="checkbox" value="1" data-ref="inputEl" data-componentid="f_cE52D70F270424B93AD29B0D72DE0290B272_4_3" /></span><label for="f_cE52D70F270424B93AD29B0D72DE0290B272_4_3-inputEl" data-ref="boxLabelEl"></label></div>
<input hidden="" autocomplete="off" name="~boolean_272_2" type="text" value="0" data-ref="hiddenCheckBoxEl" data-cmpid="f_cE52D70F270424B93AD29B0D72DE0290B272_4_3" /><span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</td>
<td>
<div data-cmpid="f_cE52D70F270424B93AD29B0D72DE0290B273_4_3">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div tabindex="-1" data-ref="inputEl">Option 3</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<div>
<table>
<tbody>
<tr>
<td>
<div data-cmpid="f_c3368052A24774E088CFF7856EBF11D13272_4_4">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="containerEl">
<table cellpadding="0" data-ref="innerCt">
<tbody>
<tr>
<td>
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="innerWrapEl"><span data-ref="displayEl"><input autocomplete="off" name="boolean_272_3" type="checkbox" value="1" data-ref="inputEl" data-componentid="f_c3368052A24774E088CFF7856EBF11D13272_4_4" /></span><label for="f_c3368052A24774E088CFF7856EBF11D13272_4_4-inputEl" data-ref="boxLabelEl"></label></div>
<input hidden="" autocomplete="off" name="~boolean_272_3" type="text" value="0" data-ref="hiddenCheckBoxEl" data-cmpid="f_c3368052A24774E088CFF7856EBF11D13272_4_4" /><span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</td>
<td>
<div data-cmpid="f_c3368052A24774E088CFF7856EBF11D13273_4_4">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div tabindex="-1" data-ref="inputEl">Option 4</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<th><label>LIMITS</label></th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th><label>Aggregate Limit Of Liability<span>*</span></label></th>
<td>
<div data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C0275_4_1">
<div><label for="f_c5278A92976E44C4D9C24EF8B866E34C0275_4_1-inputEl" data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="hiddenDataEl"><input name="int_275" type="hidden" value="1000000" /></div>
<div data-ref="triggerWrap">
<div data-ref="inputWrap"><input autocomplete="off" name="f_c5278A92976E44C4D9C24EF8B866E34C0275_4_1-inputEl" size="1" type="text" value="$1,000,000" placeholder="(Select)" data-ref="inputEl" data-componentid="f_c5278A92976E44C4D9C24EF8B866E34C0275_4_1" /></div>
<div> </div>
</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th><label>eCrime Loss Sublimit Of Liability<span>*</span></label></th>
<td>
<div data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C0276_4_1">
<div><label for="f_c5278A92976E44C4D9C24EF8B866E34C0276_4_1-inputEl" data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="triggerWrap">
<div data-ref="inputWrap"><input autocomplete="off" maxlength="12" name="int_276" size="1" type="text" value="$250,000" data-ref="inputEl" data-componentid="f_c5278A92976E44C4D9C24EF8B866E34C0276_4_1" /></div>
</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th><label>Dependent Business Sublimit of Liability</label></th>
<td>
<div data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C0277_4_1">
<div><label for="f_c5278A92976E44C4D9C24EF8B866E34C0277_4_1-inputEl" data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="triggerWrap">
<div data-ref="inputWrap"><input autocomplete="off" maxlength="12" name="int_277" size="1" type="text" value="$100,000" data-ref="inputEl" data-componentid="f_c5278A92976E44C4D9C24EF8B866E34C0277_4_1" /></div>
</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th><label>Ransomware Sublimit Of Liability</label></th>
<td>
<div data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C0278_4_1">
<div><label for="f_c5278A92976E44C4D9C24EF8B866E34C0278_4_1-inputEl" data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="triggerWrap">
<div data-ref="inputWrap"><input autocomplete="off" maxlength="12" name="float_278|$???,???,???,???,??0" size="1" type="text" value="$100,000" data-ref="inputEl" data-componentid="f_c5278A92976E44C4D9C24EF8B866E34C0278_4_1" /></div>
</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th> </th>
<td>
<div>
<table>
<tbody>
<tr>
<td>
<div data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C027A_4_1">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="containerEl">
<table cellpadding="0" data-ref="innerCt">
<tbody>
<tr>
<td>
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="innerWrapEl"><span data-ref="displayEl"><input autocomplete="off" name="boolean_27A" type="checkbox" value="1" data-ref="inputEl" data-componentid="f_c5278A92976E44C4D9C24EF8B866E34C027A_4_1" /></span><label for="f_c5278A92976E44C4D9C24EF8B866E34C027A_4_1-inputEl" data-ref="boxLabelEl"></label></div>
<input hidden="" autocomplete="off" name="~boolean_27A" type="text" value="0" data-ref="hiddenCheckBoxEl" data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C027A_4_1" /><span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</td>
<td>
<div data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C027B_4_1">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div tabindex="-1" data-ref="inputEl">Ransomware Excl.</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th><label>Ransomware Coinsurance(%)</label></th>
<td>
<div data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C027C_4_1">
<div><label for="f_c5278A92976E44C4D9C24EF8B866E34C027C_4_1-inputEl" data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="triggerWrap">
<div data-ref="inputWrap"><input autocomplete="off" maxlength="22" name="float_27C|???,???,???,???,??0.00" size="1" type="text" value="10.00" placeholder="%" data-ref="inputEl" data-componentid="f_c5278A92976E44C4D9C24EF8B866E34C027C_4_1" /></div>
</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th> </th>
<td>
<div>
<table>
<tbody>
<tr>
<td>
<div data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C027E_4_1">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="containerEl">
<table cellpadding="0" data-ref="innerCt">
<tbody>
<tr>
<td>
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="innerWrapEl"><span data-ref="displayEl"><input autocomplete="off" name="boolean_27E" type="checkbox" value="1" data-ref="inputEl" data-componentid="f_c5278A92976E44C4D9C24EF8B866E34C027E_4_1" /></span><label for="f_c5278A92976E44C4D9C24EF8B866E34C027E_4_1-inputEl" data-ref="boxLabelEl"></label></div>
<input hidden="" autocomplete="off" name="~boolean_27E" type="text" value="0" data-ref="hiddenCheckBoxEl" data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C027E_4_1" /><span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</td>
<td>
<div data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C027F_4_1">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div tabindex="-1" data-ref="inputEl">Coinsurance N/A</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th> </th>
<td>
<div>
<table>
<tbody>
<tr>
<td>
<div data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C0281_4_1">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="containerEl">
<table cellpadding="0" data-ref="innerCt">
<tbody>
<tr>
<td>
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="innerWrapEl"><span data-ref="displayEl"><input autocomplete="off" name="boolean_281" type="checkbox" value="1" data-ref="inputEl" data-componentid="f_c5278A92976E44C4D9C24EF8B866E34C0281_4_1" /></span><label for="f_c5278A92976E44C4D9C24EF8B866E34C0281_4_1-inputEl" data-ref="boxLabelEl"></label></div>
<input hidden="" autocomplete="off" name="~boolean_281" type="text" value="0" data-ref="hiddenCheckBoxEl" data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C0281_4_1" /><span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</td>
<td>
<div data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C0282_4_1">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div tabindex="-1" data-ref="inputEl">See Endorsement</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th><label>Aggregate Limit Factor</label></th>
<td>
<div data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C0283_4_1">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div tabindex="-1" data-ref="inputEl">1.00</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th><label>RETENTIONS</label></th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th><label>Guideline Retention<span>*</span></label></th>
<td>
<div data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C0286_4_1">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div tabindex="-1" data-ref="inputEl">$20,000</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th><label>Selected Retention<span>*</span></label></th>
<td>
<div data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C0287_4_1">
<div><label for="f_c5278A92976E44C4D9C24EF8B866E34C0287_4_1-inputEl" data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div data-ref="triggerWrap">
<div data-ref="inputWrap"><input autocomplete="off" maxlength="12" name="float_287|$???,???,???,???,??0" size="1" type="text" value="$25,000" data-ref="inputEl" data-componentid="f_c5278A92976E44C4D9C24EF8B866E34C0287_4_1" /></div>
</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th><label>Retention Factor</label></th>
<td>
<div data-cmpid="f_c5278A92976E44C4D9C24EF8B866E34C0288_4_1">
<div><label data-ref="labelEl"><span data-ref="labelTextEl"></span></label>
<div data-ref="bodyEl">
<div tabindex="-1" data-ref="inputEl">0.96</div>
<span data-ref="ariaStatusEl"></span><span data-ref="ariaErrorEl"></span></div>
</div>
</div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th> </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th> </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

I want to freeze Header, in first column.

Tags:

2

Answers


  1. 0 
    body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.table-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.main-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.main-table th,
.main-table td {
    border: 1px solid #ddd;
    padding: 8px;
    min-width: 150px; /* Adjust as necessary */
}

.main-table .fixed-column {
    position: sticky;
    left: 0;
    background: #f1f1f1;
    z-index: 2; /* Ensures the fixed column is above other cells */
}

.nested-table-container {
    overflow: auto;
    max-height: 150px; /* Adjust as necessary */
}

.nested-table {
    width: 100%;
    border-collapse: collapse;
}

.nested-table th,
.nested-table td {
    border: 1px solid #ddd;
    padding: 4px;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed First Column Table</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="table-wrapper">
        <div class="table-container">
            <table class="main-table">
                <tbody>
                    <tr>
                        <th class="fixed-column">H1</th>
                        <td>
                            <div class="nested-table-container">
                                <table class="nested-table">
                                    <tr><td>Nested 1.1</td></tr>
                                    <tr><td>Nested 1.2</td></tr>
                                    <tr><td>Nested 1.3</td></tr>
                                    <tr><td>Nested 1.4</td></tr>
                                    <tr><td>Nested 1.5</td></tr>
                                </table>
                            </div>
                        </td>
                        <td>
                            <div class="nested-table-container">
                                <table class="nested-table">
                                    <tr><td>Nested 2.1</td></tr>
                                    <tr><td>Nested 2.2</td></tr>
                                    <tr><td>Nested 2.3</td></tr>
                                    <tr><td>Nested 2.4</td></tr>
                                    <tr><td>Nested 2.5</td></tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th class="fixed-column">H2</th>
                        <td>
                            <div class="nested-table-container">
                                <table class="nested-table">
                                    <tr><td>Nested 3.1</td></tr>
                                    <tr><td>Nested 3.2</td></tr>
                                    <tr><td>Nested 3.3</td></tr>
                                    <tr><td>Nested 3.4</td></tr>
                                    <tr><td>Nested 3.5</td></tr>
                                </table>
                            </div>
                        </td>
                        <td>
                            <div class="nested-table-container">
                                <table class="nested-table">
                                    <tr><td>Nested 4.1</td></tr>
                                    <tr><td>Nested 4.2</td></tr>
                                    <tr><td>Nested 4.3</td></tr>
                                    <tr><td>Nested 4.4</td></tr>
                                    <tr><td>Nested 4.5</td></tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th class="fixed-column">H3</th>
                        <td>
                            <div class="nested-table-container">
                                <table class="nested-table">
                                    <tr><td>Nested 5.1</td></tr>
                                    <tr><td>Nested 5.2</td></tr>
                                    <tr><td>Nested 5.3</td></tr>
                                    <tr><td>Nested 5.4</td></tr>
                                    <tr><td>Nested 5.5</td></tr>
                                </table>
                            </div>
                        </td>
                        <td>
                            <div class="nested-table-container">
                                <table class="nested-table">
                                    <tr><td>Nested 6.1</td></tr>
                                    <tr><td>Nested 6.2</td></tr>
                                    <tr><td>Nested 6.3</td></tr>
                                    <tr><td>Nested 6.4</td></tr>
                                    <tr><td>Nested 6.5</td></tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

    Check this, I have added some sample data for testing

    Login or Signup to reply.
  2. 0 
     const tableContainer = document.querySelector('.table-container');
    const scrollableTable = document.querySelector('.scrollable-table');

    tableContainer.addEventListener('scroll', function() {
      scrollableTable.scrollTop = tableContainer.scrollTop;
    });
    .table-container {
      display: flex;
      height: 388px;
      overflow: auto;
    }

    .fixed-column {
      width: 120px;
      background-color: #f2f2f2;
    }

    .fixed-column table {
      border-collapse: collapse;
      width: 100%;
    }

    .fixed-column th,
    .fixed-column td {
      padding: 8px;
      border-bottom: 1px solid #ddd;
    }

    .scrollable-table {
      flex-grow: 1;
      overflow-x: auto;
    }

    .scrollable-table table {
      border-collapse: collapse;
      width: 100%;
    }

    .scrollable-table th,
    .scrollable-table td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }

    .scrollable-table th {
      background-color: #f2f2f2;
      position: sticky;
      top: 0;
      z-index: 1;
    }
    <!DOCTYPE html>
<html>
<head>
  <title>Fruit Data Table</title>
</head>
<body>
  <div class="table-container">
    <div class="fixed-column">
      <table>
        <thead>
          <tr>
            <th>Fruit</th>
          </tr>
        </thead>
        <tbody>
          <tr><td>Apple</td></tr>
          <tr><td>Banana</td></tr>
          <tr><td>Orange</td></tr>
          <tr><td>Strawberry</td></tr>
          <tr><td>Mango</td></tr>
          <tr><td>Pineapple</td></tr>
          <tr><td>Grapes</td></tr>
          <tr><td>Watermelon</td></tr>
          <tr><td>Kiwi</td></tr>
          <tr><td>Guava</td></tr>
        </tbody>
      </table>
    </div>
    <div class="scrollable-table">
      <table>
        <thead>
          <tr>
            <th>Color</th>
            <th>Season</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Red</td>
            <td>Fall</td>
            <td>2.50</td>
          </tr>
          <tr>
            <td>Yellow</td>
            <td>All Year</td>
            <td>1.20</td>
          </tr>
          <tr>
            <td>Orange</td>
            <td>Winter</td>
            <td>1.80</td>
          </tr>
          <tr>
            <td>Red</td>
            <td>Summer</td>
            <td>4.00</td>
          </tr>
          <tr>
            <td>Yellow</td>
            <td>Summer</td>
            <td>3.50</td>
          </tr>
          <tr>
            <td>Yellow</td>
            <td>Summer</td>
            <td>2.80</td>
          </tr>
          <tr>
            <td>Green</td>
            <td>Fall</td>
            <td>3.20</td>
          </tr>
          <tr>
            <td>Green</td>
            <td>Summer</td>
            <td>1.50</td>
          </tr>
          <tr>
            <td>Brown</td>
            <td>Winter</td>
            <td>2.20</td>
          </tr>
          <tr>
            <td>Yellow</td>
            <td>Summer</td>
            <td>2.60</td>
          </tr>
          <tr>
            <td>Yellow</td>
            <td>Summer</td>
            <td>2.60</td>
          </tr>
          <tr>
            <td>Yellow</td>
            <td>Summer</td>
            <td>2.60</td>
          </tr>
          <tr>
            <td>Yellow</td>
            <td>Summer</td>
            <td>2.60</td>
          </tr>
          <tr>
            <td>Yellow</td>
            <td>Summer</td>
            <td>2.60</td>
          </tr>
          <tr>
            <td>Yellow</td>
            <td>Summer</td>
            <td>2.60</td>
          </tr>
          <tr>
            <td>Yellow</td>
            <td>Summer</td>
            <td>2.60</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search