使tableorter响应

Question

@media only screen and (max-width: 800px) {
    #unseen table td:nth-child(2), 
    #unseen table th:nth-child(2) {display: none;}
}

@media only screen and (max-width: 640px) {
    #unseen table td:nth-child(4),
    #unseen table th:nth-child(4),
    #unseen table td:nth-child(7),
    #unseen table th:nth-child(7),
    #unseen table td:nth-child(8),
    #unseen table th:nth-child(8){display: none;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<table>
    <thead> 
        <tr> 
            <th>TEST1</th> 
            <th>TEST2</th> 
            <th>TEST3</th> 
            <th>TEST4</th> 
            <th>TEST5</th> 
            <th>TEST6</th> 
            <th>TEST7 </th> 
            <th>TEST8</th> 
            <th>TEST9</th> 
            <th>TEST10</th> 
            <th>TEST1</th> 
            <th>TEST12</th> 
            <th>TEST13</th> 
            <th>TEST14</th> 
            <th>TEST15</th> 
            <th>TEST16</th> 
            <th>TEST17</th> 
        </tr> 
    </thead> 
    <tbody> 

            <tr>
            <td>TEST1</td>
            <td>TEST2</td>
            <td>TEST3</td>
            <td>TEST4</td>
            <td>TEST5</td>
            <td>TEST6</td>
            <td>TEST7</td>
            <td>TEST8</td>
            <td>TEST9</td>
            <td>TEST10</td>
            <td>TEST11</td>
            <td>TEST12</td>
            <td>TEST13</td>
            <td>TEST14</td>
            <td>TEST15</td>
            <td>TEST16</td>
            <td>TEST17</td>
            </tr> 
    </tbody>
</table>

我正在尝试使tablesorter响应，以便当我缩放页面时它保持在相同的位置。

现在，当我缩放它时，它朝正确的方向增长。如何解决它保持在同一位置？

你能看出出了什么问题吗？ 非常感谢你的帮助和支持。