Question

我正在使用tablesorter javascript来排序，过滤和滚动表格，但非常奇怪的是滚动一直出现在右边，如果我去包含滚动的分区，每次调整窗口大小时，都会修改宽度和左边的属性=（我设置错误了？或者默认情况下应该默认在桌子旁边？

这是我正在使用的示例代码。

<div>
    <table id="my_id" class="tablesorter">
        <style for="style_for_filter">
        /*  MUST BE added to any custom themes */
        .tablesorter .filtered {
            display: none;
        }

        /* filter row */
        .tablesorter-filter-row td {
            background: #eee;
            line-height: normal;
            text-align: center; /* center the input */
            -webkit-transition: line-height 0.1s ease;
            -moz-transition: line-height 0.1s ease;
            -o-transition: line-height 0.1s ease;
            transition: line-height 0.1s ease;
        }

        /* optional disabled input styling */
        .tablesorter-filter-row .disabled {
            opacity: 0.5;
            filter: alpha(opacity=50);
            cursor: not-allowed;
        }

        /* hidden filter row */
        .tablesorter-filter-row.hideme td {
            /*** change this padding to modify the thickness     ***/
            /*** of the closed filter row (height = padding x 2) ***/
            padding: 5px;
            margin: 0;
            line-height: 0;
            cursor: pointer;
        }
        .tablesorter-filter-row.hideme * {
            height: 1px;
            min-height: 0;
            border: 0;
            padding: 0;
            margin: 0;
            /* don't use visibility: hidden because it disables tabbing */
            opacity: 0;
            filter: alpha(opacity=0);
        }

        /* filters */
        .tablesorter-filter {
            width: 95%;
            height: inherit;
            margin: 2px;
            padding: 2px;
            //background-color: #fff;
            //border: 1px solid #bbb;
            //color: #333;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: height 0.1s ease;
            -moz-transition: height 0.1s ease;
            -o-transition: height 0.1s ease;
            transition: height 0.1s ease;
        }

        </style>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.2/js/jquery.tablesorter.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.2/js/jquery.tablesorter.widgets.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.2/js/widgets/widget-scroller.min.js"></script>
        <script>
            $(document).ready(function()
            {
               $('#my_id')
               .tablesorter({

                   widgets: ['filter', 'scroller', ],
                   widgetOptions:{
                        'filter_hideEmpty': false,
                        'filter_hideFilters': false,
                        'filter_searchDelay': 300,
                        'filter_serversideFiltering': false,

                        'scroller_height': 200,
                        },

                   theme: 'bootstrap', // set bootstrap theme
                   showProcessing: true,
                   ignoreCase: false,
                   widthFixed: true,
                   sortResetKey: 'ctrlKey',
                   headerTemplate : '{icon}{content}',
                   })
            });

        </script>

        <thead>
        <tr>
            <th><p>the string</p></th>
            <th><p>number</p></th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>0</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>1</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>2</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>3</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>4</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>5</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>6</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>7</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>8</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>9</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>10</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>11</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>12</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>13</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>14</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>15</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>16</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>17</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>18</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>19</p></td>
        </tr>
        </tbody>
    </table>
</div>

Answer 1

＆＃13;

<div class="page">
    <table id="my_id" class="tablesorter">
        <style for="style_for_filter">
        /*  MUST BE added to any custom themes */
		
		.page {
			max-height: 20vw;
			width: 40vw;
		}

        .tablesorter .filtered {
            display: none;
        }

        /* filter row */
        .tablesorter-filter-row td {
            background: #eee;
            line-height: normal;
            text-align: center; /* center the input */
            -webkit-transition: line-height 0.1s ease;
            -moz-transition: line-height 0.1s ease;
            -o-transition: line-height 0.1s ease;
            transition: line-height 0.1s ease;
        }

        /* optional disabled input styling */
        .tablesorter-filter-row .disabled {
            opacity: 0.5;
            filter: alpha(opacity=50);
            cursor: not-allowed;
        }

        /* hidden filter row */
        .tablesorter-filter-row.hideme td {
            /*** change this padding to modify the thickness     ***/
            /*** of the closed filter row (height = padding x 2) ***/
            padding: 5px;
            margin: 0;
            line-height: 0;
            cursor: pointer;
        }
        .tablesorter-filter-row.hideme * {
            height: 1px;
            min-height: 0;
            border: 0;
            padding: 0;
            margin: 0;
            /* don't use visibility: hidden because it disables tabbing */
            opacity: 0;
            filter: alpha(opacity=0);
        }

        /* filters */
        .tablesorter-filter {
            width: 95%;
            height: inherit;
            margin: 2px;
            padding: 2px;
            //background-color: #fff;
            //border: 1px solid #bbb;
            //color: #333;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: height 0.1s ease;
            -moz-transition: height 0.1s ease;
            -o-transition: height 0.1s ease;
            transition: height 0.1s ease;
        }

        </style>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.2/js/jquery.tablesorter.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.2/js/jquery.tablesorter.widgets.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.2/js/widgets/widget-scroller.min.js"></script>
        <script>
            $(document).ready(function()
            {
               $('#my_id')
               .tablesorter({

                   widgets: ['filter', 'scroller', ],
                   widgetOptions:{
                        'filter_hideEmpty': false,
                        'filter_hideFilters': false,
                        'filter_searchDelay': 300,
                        'filter_serversideFiltering': false,

                        'scroller_height': 200,
                        },

                   theme: 'bootstrap', // set bootstrap theme
                   showProcessing: true,
                   ignoreCase: false,
                   widthFixed: true,
                   sortResetKey: 'ctrlKey',
                   headerTemplate : '{icon}{content}',
                   })
            });

        </script>

        <thead>
        <tr>
            <th><p>the string</p></th>
            <th><p>number</p></th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>0</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>1</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>2</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>3</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>4</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>5</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>6</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>7</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>8</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>9</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>10</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>11</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>12</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>13</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>14</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>15</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>16</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>17</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>18</p></td>
        </tr>
        <tr>
            <td><p>this is a row</p></td>
            <td><p>19</p></td>
        </tr>
        </tbody>
    </table>
</div>

＆＃13;

We can fix this issue by adding id/ class to parent div tag of table tag and apply css to it.

tablesorter滚动条不会出现在表格旁边

1 个答案: