Hide/Cap/Trim Table Width 100％ - Tablesorter

我一直在努力尋找一種能夠對錶格進行排序和調整大小並找到Tablesorter jquery插件（mottie folk）的方法。Hide/Cap/Trim Table Width 100％ - Tablesorter

這似乎做的一切我想做的事情時，文本一行

style="text-overflow: ellipsis; white-space: nowrap;"

然後熄滅頁面時除外。這張桌子的寬度是100％，我不想這樣做。

是他們的一種方式來阻止導致頁面內容去超過100％

代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 

     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script> 

     <!--http://mottie.github.io/tablesorter/--> 

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.5/css/theme.blue.min.css"> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.5/js/jquery.tablesorter.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.5/js/jquery.tablesorter.widgets.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.5/js/widgets/widget-resizable.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.5/js/widgets/widget-storage.min.js"></script> 


    <style id="css">th.tablesorter-header.resizable-false { 
    background-color: #e6bf99; 
} 
/* ensure box-sizing is set to content-box, if using jQuery versions older than 1.8; 
this page is using jQuery 1.4 */ 
*, *:before, *:after { 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    box-sizing: content-box; 
} 
</style> 

<script id="js">$(function() { 

    $('.full-width-table').tablesorter({ 
     theme : 'blue', 
     // initialize zebra striping and resizable widgets on the table 
     widgets: [ 'zebra', 'resizable', 'stickyHeaders' ], 
     widgetOptions: { 
      resizable: false, 
      // These are the default column widths which are used when the table is 
      // initialized or resizing is reset; note that the "Age" column is not 
      // resizable, but the width can still be set to 40px here 
      resizable_widths : [ '10%', '10%', '40px', '10%', '100px' ] 
     } 
    }); 

});</script> 
</head> 
<body> 

<div id="main"> 

    <div id="demo"> 

<table class="full-width-table"> 
    <thead> 
     <tr> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th class="resizable-false">Age</th> 
      <th>Total</th> 
      <th>Discount</th> 
      <th>Date</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr> 
     <tr><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr> 
     <tr><td>Clark</td><td>Kent</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr> 
     <tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr> 
       <tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td style="text-overflow: ellipsis; white-space: nowrap;">Jan 18, 2007 9:12 AMffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggfff</td></tr> 
    </tbody> 
</table> 
</div> 



</div> 

</body> 
</html>