CSS:如何在嵌套表中实现滚动条?

时间:2017-05-18 05:20:25

标签: jquery html css css3

我有一个功能,其中我有一个表,其中行也是表格的形式。现在我想在主表上实现scrollbar。但问题是当我尝试在主表上实现滚动条时它没有在主表上实现而是滚动出现在表的行上(因为行也是表的形式。)

我尝试通过赋予overflow-y: scroll;无效的方式为主表上方的div提供样式。 我希望滚动到主表(标题)下面。对于以表格形式出现的tr 请指导。下面是我一直试图滚动的代码:

请找到我的以下代码:

 <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>

0 个答案:

没有答案