【问题标题】:Vertical scroll bar in table表格中的垂直滚动条
【发布时间】:2020-06-26 11:01:28
【问题描述】:
<div class="table-responsive table-height">
<!-- <div id="mtsdetails_wrapper" class="dataTables_wrapper no-footer"><div class="dt-buttons">      <button class="dt-button buttons-csv buttons-html5" tabindex="0" aria-controls="mtsdetails" type="button"><span>CSV</span></button> <button class="dt-button buttons-excel buttons-html5" tabindex="0" aria-controls="mtsdetails" type="button"><span>Excel</span></button> <button class="dt-button buttons-pdf buttons-html5" tabindex="0" aria-controls="mtsdetails" type="button"><span>PDF</span></button> <button class="dt-button buttons-print" tabindex="0" aria-controls="mtsdetails" type="button"><span>Print</span></button> </div> -->
                                                    <span th:if="${actd_viewtrue != null && actd_viewtrue == 'valpresent' }">
                                                     
                                                                
                                                    <table id=shortstorage class="table table-hover table-bordered dataTable no-footer" role="grid" aria-describedby="mtsdetails_info">
                                                        <thead>
                                                            <tr role="row">
                                                            <th class="sorting_desc" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="Sr.No.: activate to sort column ascending" style="width: 43px;" aria-sort="descending">Sr.No.</th>
                                                            <th class="sorting" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 41px;">Name</th>
                                                            <th class="sorting" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="CIN Number: activate to sort column ascending" style="width: 66px;">CIN Number</th>
                                                            <th class="sorting" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="Address: activate to sort column ascending" style="width: 58px;">Address</th>
                                                            <th class="sorting" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="State: activate to sort column ascending" style="width: 37px;">State</th>
                                                            <th class="sorting" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="District: activate to sort column ascending" style="width: 51px;">District</th>
                                                            <th class="sorting" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="Contact Details: activate to sort column ascending" style="width: 72px;">Name&Designation</th>
                                                            <th class="sorting" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="Mobile: activate to sort column ascending" style="width: 46px;">Mobile</th>
                                                            <th class="sorting" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="Fax: activate to sort column ascending" style="width: 25px;">Fax</th>
                                                            <th class="sorting" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="Email: activate to sort column ascending" style="width: 38px;">Email</th>
                                                            <th class="sorting" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="Status:activate to sort column ascending" style="width:45px;">Status</th>
                                                            <th class="sorting" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="Remarks:activate to sort column ascending" style="width:45px;">Remarks</th>
                                                            
                                                            <span th:if="${actd_addtrue == 'addpresent'}">
                                                            <th class="sorting" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="Action:activate to sort column ascending" style="width:45px;">Action</th>
                                                            </span>
                                                            
                                                            <span th:each="sec_chk : ${actd}">
                                                            <span th:if="${sec_chk == 'View'}">
                                                            <th class="sorting" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="View: activate to sort column ascending" style="width: 36px;">View</th>
                                                            </span>
                                                            </span>
                                                                
                                                            <span th:each="sec_chk : ${actd}">
                                                            <span th:if="${sec_chk == 'Edit'}">
                                                            <th class="sorting" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="View: activate to sort column ascending" style="width: 36px;">Edit</th>
                                                            </span>
                                                            </span>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            
                                                         <tr role="row" class="odd" th:each="compregloop,incr : ${compregList}">
                                                                <td th:text="${incr.count+ srno}" class="sorting_1"></td>
                                                                <td th:text="${compregloop.companyname}"></td>
                                                                <td th:text="${compregloop.cin_number}"></td>
                                                                <td th:text="${compregloop.Author_Address}"></td>
                                                                <td>
                                                                <div th:each="statedrop : ${stateselections}">
                                                                <span th:if="${compregloop.registeredoffice_state == statedrop.statecode}" th:text="${statedrop.statename_inenglish}"></span>
                                                                <!-- <span th:unless="${compregloop.Registeredoffice_Statecode == statedrop.statecode}" th:text="${compregloop.Registeredoffice_Statecode}"></span>
                                                                 -->
                                                                 </div>
                                                                 </td>
                                                                <td>
                                                                <div th:each="districtselection: ${distsel}">
                                                                <span th:if="${compregloop.registeredoffice_districts == districtselection.districtcode}" th:text="${districtselection.districtname_inenglish}"></span> 
                                                                </div>
                                                                </td>
                                                                <td> 
                                                                <span th:if="${compregloop.Author_Name == null}">
                                                                </span>
                                                                <span th:unless="${compregloop.Author_Name == null}" th:text="${compregloop.Author_Name+' '+'('+compregloop.Author_Designation+')'}">
                                                                </span>
                                                                </td>
                                                                <td th:text="${compregloop.Author_Mobile}"></td>
                                                                <td th:text="${compregloop.Author_Fax}"></td>
                                                                <td th:text="${compregloop.Author_Email}"></td>
                                                                <td th:text="${compregloop.verificationstatus}"></td>
                                                                <td th:text="${compregloop.verificationremarks}"></td>
                                                                <span th:if="${actd_addtrue == 'addpresent'}">
                                                                <td>                                    
                                                                 <a class="btn btn-success btn-xs" data-toggle="modal" th:data-target="'#myModal' + ${compregloop.id}"  href="#"> Accept / Reject</a>
                                                              <div class="modal" th:id="'myModal'+ ${compregloop.id}" style="display: none;">
                                                                <div class="modal-dialog">
                                                                    <div class="modal-content">
                                                                      <div class="modal-header">
                                                                        <h4 class="modal-title">Approval</h4>
                                                                      </div>
                                                                      <div class="modal-body">
                                                                        <form class="form-horizontal active" th:action="@{'/acceptrejectcompany/'+${compregloop.id}}" th:object="${cmpreg}" role="form" id="form_5"  method="post">   <!--form_4 start -->                                       
                                                                            
                                                                            <div class="form-group">
                                                                                <label class="col-md-3 control-label"></label>
                                                                                <div class="col-md-7">
                                                                                    <input id="companystatus" type="radio" name="companystatus" class="" value="Accepted"> Accept
                                                                                    <input id="companystatus" type="radio" name="companystatus" class="" value="Rejected"> Reject
                                                                                </div>
                                                                            </div>
                                                                            <div class="form-group">
                                                                                <label class="col-md-3 control-label">Remarks</label>
                                                                                <div class="col-md-7 col-sm-7 col-xs-12">
                                                                                    <textarea name="remarks" class="form-control"></textarea>
                                                                                </div>
                                                                            </div>
                                                                            
                                                                            
                                                                            
                                                                            <div class="form-group ">
                                                                                <label class="col-md-3 control-label">&nbsp;</label>
                                                                                <div class="col-sm-7">
                                                                                    <button type="submit" onclick="return radiocheck()" class="btn btn-info waves-effect waves-light">Submit</button>
                                                                                </div>
                                                                            </div>
                                                                            
                                                                            
                                                                        </form>
                                                                      </div>
                                                                      <div class="modal-footer">
                                                                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                                                      </div>
                                            
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            
                                                            </td>
                                                            </span>
                                                                
                                                                <span th:each="sec_chk : ${actd}">
                                                                <span th:if="${sec_chk == 'View'}">
                                                                <td><a th:href="@{'/view_applicationdetails/'+${compregloop.id}}">View</a></td>
                                                                </span>
                                                                </span>
                                                                
                                                                 
                                                                
                                                                <span th:each="sec_chk : ${actd}">
                                                                <span th:if="${sec_chk == 'Edit'}">
                                                                 <td> <a th:href="@{'/editcompany/'+${compregloop.id}}">Edit</a> </td>
                                                                 </span>
                                                                 </span>
                                                                
                                                                 
                                                                 </tr>
                                                            </tbody>
                                                    </table>
                            
                                                </span>
                            <span th:unless="${actd_viewtrue != null && actd_viewtrue == 'valpresent' }">
                            <label>YOU ARE NOT AUTHORISED TO VIEW THIS PAGE.PLEASE CONTACT ADMINISTRATOR</label>
                            </span>
                         
                        
                                                    <!-- <div class="dataTables_info" id="mtsdetails_info" role="status" aria-live="polite">Showing 1 to 1 of 1 entries</div> -->
                                                    <!-- <div class="dataTables_paginate paging_simple_numbers" id="mtsdetails_paginate"><a class="paginate_button previous disabled" aria-controls="mtsdetails" data-dt-idx="0" tabindex="0" id="mtsdetails_previous">Previous</a><span><a class="paginate_button current" aria-controls="mtsdetails" data-dt-idx="1" tabindex="0">1</a></span><a class="paginate_button next disabled" aria-controls="mtsdetails" data-dt-idx="2" tabindex="0" id="mtsdetails_next">Next</a></div> -->
                                                <!-- </div> -->
                                                </div> 

您好,我制作了一张表格,里面有水平滚动条,但我必须以多种方式制作垂直滚动条 ..我不想使用jquery 数据表。

我已经尝试添加 .table 高度{ 高度:500px; 溢出:自动; }

但表头也随之滚动...我需要修复表头,只有表会滚动

【问题讨论】:

    标签: jquery bootstrap-4


    【解决方案1】:

        .table-responsive {
            max-height:90vh; //you can adjust this value
        }
    .table-fixed thead {
      width: 97%;
    }
    .table-fixed tbody {
      height: 230px;
      overflow-y: auto;
      width: 100%;
    }
    .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
      display: block;
    }
    .table-fixed tbody td, .table-fixed thead > tr> th {
      float: left;
      border-bottom-width: 0;
    }
    <div class="table-responsive">
      <table class="table table-fixed">
        ...
      </table>
    </div>
    

    【讨论】:

    • 我试过了,但标题不固定它也在滚动垂直滚动条时滚动
    猜你喜欢
    • 2018-03-03
    • 2017-08-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多