如何设置表格滚动条的正确位置?

时间:2018-07-07 07:34:46

标签: jquery html css bootstrap-table

我在添加表格右侧的滚动条时遇到问题。但是我不能说出实际的问题,但是我使用了一个jQuery插件table_scroll.js。问题在此图中显示。谁能帮我?谢谢。

https://i.stack.imgur.com/XqLBD.png

1 个答案:

答案 0 :(得分:1)

您可以通过使用CSS来实现。看我的桌子。我在这里使用一些CSS来创建表格主体的滚动条。

.viewTable {
        table-layout:fixed;
        margin:auto;
    }
    .thData, .tdData {
        padding:8px;
    text-align: center;
    }
    .theadData, tfoot {
    background-color: #9ac9fb;
        display:table;
        width:100%;
    }
    .table-height .table .tdData {
    vertical-align: middle !important; 
    }
    .viewTable .tbodyData {
        max-height:250px;
        overflow:auto;
        overflow-x:hidden;
        display:block;
    width:100%;
    }
    .item-dist .tbodyData {
        height:490px;
        overflow:auto;
        overflow-x:hidden;
    width:100%;
    }



    .tbodyData .trData {
        display:table;
        width:100%;
        table-layout:fixed;
        border-bottom: 1px solid #ffffff !important;
    }
    .table .theadData .thData {
    border: none !important;
    width: 10% !important;
        text-align: center;
    padding: 10px;
    }
        <table align="center" class="table table-hover viewTable">
            <thead class="theadData">
                <tr class="trData">
                    <th class="thData">Column 1</th>

                    <th class="thData">Column 2</th>
                    <th class="thData">Column 3</th>

                    
                    <th class="thData">Column 4</th>
                  </tr>
            </thead>
  
            <tbody class="tbodyData">
            
                  <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>
                                              <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>
                                              <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>
                                              <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>
                                              <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>
                                              <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>
                                              <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>                  <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>                  <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>                  <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>
                                              <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>
                                              <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>
                                              <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>
                                              <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>
                                              <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>
                                              <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>
                                              <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>
                                              <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>
                                              <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>
                                              <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>
                                              <tr class="trData">
                    <td class="tdData">A</td>
                    <td class="tdData">B</td>
                    <td class="tdData">C</td>
                    <td class="tdData">D</td>
                    
                            </tr>
     
             
                 
            </tbody>
      </table>