隐藏/上限/Trim Table 宽度 100% - Table 分类器

Question

我一直在尝试找到一种能够对 table 进行排序和调整大小的方法，并找到了 Tablesorter jquery 插件（mottie folk）。

它似乎做了我想让它做的一切，除了当文本变成一行时

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

然后它离开了页面。 table 是 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>.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>.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>.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>3.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>.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>

Answer 1

我知道解决这个问题的唯一方法是更改 table 中的值。（除了：使用 div 构建 table 或重新设计 table 单元格）
如果您将  添加到您的字符串中，它会告诉浏览器在哪里可以将字符串分成新行。
浏览器不能在没有空格或类似“-”的情况下断开字符串。

Answer 2

感谢 Rob G 在 GitHub 上进行排序。

有两处需要修改：

添加overflow:hidden；到 table 单元格。添加 table-layout:fixed; table.

https://github.com/Mottie/tablesorter/issues/1175#issuecomment-193988250

隐藏/上限/Trim Table 宽度 100% - Table 分类器

Hide / Cap / Trim Table Width 100% - Tablesorter

jquery

tablesorter