I have a functionality where in i have a table in which rows are also in the form of tables. Now i want to implement scrollbar on the main table. But the issue is when i try to implement scrollbar on the main table it does not implement on the main table instead the scroll appears on the rows of the table(as the rows are also in the form of table.)
I tried giving style to the div above the main table by giving overflow-y: scroll; didnt work.
I want the scroll to come below the main table(header). For the tr that are appearing in the form of tables
Please guide. Below is the code that i have been trying to give scroll to:
Please find my below code:
<div class="myClassMain">
<h3 class="style2">My Details</h3>
<div class="coll" style="width: 98%;padding:10px;">
<select id="sel" name="sel" size="1">
<option value=""
selected="selected">
Click
</option>
<option value="11">Test</option>
<option value="00">TEst2</option>
</select>
<div>
<a id="check1" href="#">[ Animals All ]</a>
</div>
<div class="test-table-rows">
<div class="test-table-arrow-cont1">
<table class="table65 myclass">
<colgroup>
<col style="width: 4%;">
<col style="width: 4%;">
<col style="width: 6%;">
<col style="width: 9%;">
<col style="width: 5%;">
<col style="width: 1%">
<col style="width: 3%;">
<col style="width: 4%;">
<col style="width: 8%;">
<col style="width: 2%;">
<col style="width: 8%;">
<col style="width: 8%;">
<col style="width: 10%;">
</colgroup>
<thead>
<tr>
<th>test</th>
<th>test1 <br>test2</th>
<th>test3 <br></th>
<th>test test</th>
<th>test <br></th>
<th>test <br></th>
<th>test <br></th>
<th>test </th>
<th>test </th>
<th>test</th>
<th>test <br>Date</th>
<th>test Date</th>
<th>test comments</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="test:ssccadss559" src="/remove.png" name="test:ssccadss559" alt="Remove" title="Remove" type="image"><a id="test:ssccadss560" href="#" style="">test main</a>
</td>
<td style="text-align: center;"></td>
<td style="text-align: center;">
<input name="test:ssccadss562" value="" type="text">
</td>
<td style="text-align: center;">
<select name="test:ssccadss564" size="1" style="width: 100%;">
<option value="" selected="selected"></option>
<option value="329">test</option>
</select>
</td>
<td style="text-align: center;">
<input id="test:ssccadss568" name="test:ssccadss568" value="" style="width:40px !important;text-align: center;" type="text">
</td>
<td style="text-align: center;">
<input id="test:ssccadss577" name="test:ssccadss577" value="" style="width:40px !important;text-align: center;" type="text">
</td>
<td style="text-align: center;">
<input id="test:ssccadss586" name="test:ssccadss586" value="" style="width:40px !important;text-align: center;" type="text">
</td>
<td style="text-align: center;"></td>
<td style="text-align: center;">
<input id="dp1495083272249" name="test:ssccadss600" class="dtp checkDate myDatePick" type="text"><img title="" alt="" src="/Icon2.png" class="ui-date">
</td>
<td style="text-align: center;">
<input name="test:ssccadss603" type="checkbox">
</td>
<td style="text-align: center;">
<input id="dp1495083272250" name="test:ssccadss605" class="dtp checkDate myDatePick" type="text"><img title="" alt="" src="/Icon2.png" class="ui-date">
</td>
<td style="text-align: center;">
<input id="dp1495083272251" name="test:ssccadss607" class="dtp checkDate myDatePick" type="text"><img title="" alt="" src="/Icon2.png" class="ui-date">
</td>
<td style="text-align: center;">
<textarea name="test:ssccadss609"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="test-table-rows">
<div class="test-table-arrow-cont1">
<table class="table65 myclass">
<colgroup>
<col style="width: 8%;">
<col style="width: 4%;">
<col style="width: 6%;">
<col style="width: 12%;">
<col style="width: 3%;">
<col style="width: 3%">
<col style="width: 3%;">
<col style="width: 12%;">
<col style="width: 8%;">
<col style="width: 2%;">
<col style="width: 8%;">
<col style="width: 8%;">
<col style="width: 10%;">
</colgroup>
<tbody>
<tr>
<td>
<input id="test:sscc:1:ss559" src="/removeIcon.png" name="test:sscc:1:ss559" alt="Remove" title="Remove">BelTest</a>
</td>
<td style="text-align: center;"></td>
<td style="text-align: center;">
<input name="test:sscc:1:ss562" value="" type="text">
</td>
<td style="text-align: center;">
<select name="test:sscc:1:ss564" size="1" style="width: 100%;">
<option value="" selected="selected"></option>
<option value="17">TEst Main</option>
</select>
</td>
<td style="text-align: center;">
<input id="test:sscc:1:ss568" name="test:sscc:1:ss568" value="" style="width:40px !important;text-align: center;" type="text">
</td>
<td style="text-align: center;">
<input id="test:sscc:1:ss577" name="test:sscc:1:ss577" value="" style="width:40px !important;text-align: center;" type="text">
</td>
<td style="text-align: center;">
<input id="test:sscc:1:ss586" name="test:sscc:1:ss586" value="" style="width:40px !important;text-align: center;" type="text">
</td>
<td style="text-align: center;"></td>
<td style="text-align: center;">
<input id="dp1495083272252" name="test:sscc:1:ss600" class="dtp checkDate myDatePick" type="text"><img title="" alt="" src="/Icon2.png" class="myClassPick">
</td>
<td style="text-align: center;">
<input name="test:sscc:1:ss603" type="checkbox">
</td>
<td style="text-align: center;">
<input id="dp1495083272253" name="test:sscc:1:ss605" class="dtp checkDate myDatePick" type="text"><img title="" alt="" src="/Icon2.png" class="myClassPick">
</td>
<td style="text-align: center;">
<input id="dp1495083272254" name="test:sscc:1:ss607" class="dtp checkDate myDatePick" type="text"><img title="" alt="" src="/Icon2.png" class="myClassPick">
</td>
<td style="text-align: center;">
<textarea name="test:sscc:1:ss609"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="test-table-rows">
<div class="test-table-arrow-cont1">
<table class="table65 myclass">
<colgroup>
<col style="width: 8%;">
<col style="width: 4%;">
<col style="width: 6%;">
<col style="width: 12%;">
<col style="width: 3%;">
<col style="width: 3%">
<col style="width: 3%;">
<col style="width: 12%;">
<col style="width: 8%;">
<col style="width: 2%;">
<col style="width: 8%;">
<col style="width: 8%;">
<col style="width: 10%;">
</colgroup>
<tbody>
<tr>
<td>
<input id="test:sscc:2:ss559" src="/removeIcon.png" name="test:sscc:2:ss559" alt="Remove" title="Remove">check Ha</a>
</td>
<td style="text-align: center;"></td>
<td style="text-align: center;">
<input name="test:sscc:2:ss562" type="text">
</td>
<td style="text-align: center;">
<select name="test:sscc:2:ss564" size="1" style="width: 100%;">
<option value=""></option>
<option value="zzz">Test</option>
</select>
</td>
<td style="text-align: center;">
<input id="test:sscc:2:ss568" name="test:sscc:2:ss568" style="width:40px !important;text-align: center;" type="text">
</td>
<td style="text-align: center;">
<input id="test:sscc:2:ss577" name="test:sscc:2:ss577" style="width:40px !important;text-align: center;" type="text">
</td>
<td style="text-align: center;">
<input id="test:sscc:2:ss586" name="test:sscc:2:ss586" style="width:40px !important;text-align: center;" type="text">
</td>
<td style="text-align: center;"></td>
<td style="text-align: center;">
<input id="dp1495083272255" name="test:sscc:2:ss600" class="dtp checkDate myDatePick" type="text"><img title="" alt="" src="Icon2.png" class="date">
</td>
<td style="text-align: center;">
<input name="test:sscc:2:ss603" type="checkbox">
</td>
<td style="text-align: center;">
<input id="dp1495083272256" name="test:sscc:2:ss605" class="dtp checkDate myDatePick" type="text"><img title="" alt="" src="Icon2.png" class="date">
</td>
<td style="text-align: center;">
<input id="dp1495083272257" name="test:sscc:2:ss607" class="dtp checkDate myDatePick" type="text"><img title="" alt="" src="Icon2.png" class="date">
</td>
<td style="text-align: center;">
<textarea name="test:sscc:2:ss609"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="nested-table-row">
<div class="nested-table-arrow-cont">
<table class="table65 myclass">
<colgroup>
<col style="width: 8%;">
<col style="width: 4%;">
<col style="width: 6%;">
<col style="width: 12%;">
<col style="width: 3%;">
<col style="width: 3%">
<col style="width: 3%;">
<col style="width: 12%;">
<col style="width: 8%;">
<col style="width: 2%;">
<col style="width: 8%;">
<col style="width: 8%;">
<col style="width: 10%;">
</colgroup>
<tbody>
<tr>
<td>
<a id="test:sscc:3:ss560" href="#" style="">TestRE</a>
</td>
<td style="text-align: center;"></td>
<td style="text-align: center;">
<input name="test:sscc:3:ss562" value="" type="text">
</td>
<td style="text-align: center;">
<select name="test:sscc:3:ss564" size="1" style="width: 100%;">
<option value="" selected="selected"></option>
<option value="jj">afd</option>
</select>
</td>
<td style="text-align: center;">
<input id="test:sscc:3:ss568" name="test:sscc:3:ss568" value="" style="width:40px !important;text-align: center;" type="text">
</td>
<td style="text-align: center;">
<input id="test:sscc:3:ss577" name="test:sscc:3:ss577" value="" style="width:40px !important;text-align: center;" type="text">
</td>
<td style="text-align: center;">
<input id="test:sscc:3:ss586" name="test:sscc:3:ss586" value="" style="width:40px !important;text-align: center;" type="text">
</td>
<td style="text-align: center;"></td>
<td style="text-align: center;">
<input id="dp1495083272258" name="test:sscc:3:ss600" class="dtp checkDate myDatePick" type="text"><img title="" alt="" src="Icon2.png" class="CHECKAGAIN">
</td>
<td style="text-align: center;">
<input name="test:sscc:3:ss603" type="checkbox">
</td>
<td style="text-align: center;">
<input id="dp1495083272259" name="test:sscc:3:ss605" class="dtp checkDate myDatePick" type="text"><img title="" alt="" src="Icon2.png" class="CHECKAGAIN">
</td>
<td style="text-align: center;">
<input id="dp1495083272260" name="test:sscc:3:ss607" class="dtp checkDate myDatePick" type="text"><img title="" alt="" src="Icon2.png" class="CHECKAGAIN">
</td>
<td style="text-align: center;">
<textarea name="test:sscc:3:ss609"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
