隐藏/上限/修剪表格宽度100% - Tablesorter

时间:2016-03-08 20:57:33

标签: jquery tablesorter

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

似乎做了我想要它做的一切,除非文本到一行

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>

enter image description here

2 个答案:

答案 0 :(得分:0)

我知道解决此问题的唯一方法是更改​​表中的值。 (除了:用div构建表格或重新设计表格单元格)
如果您在字符串中添加&shy;,它会告诉浏览器它可以将字符串分成新行 浏览器不能在没有空格的情况下破坏字符串,如“ - ”。

答案 1 :(得分:0)

感谢Rob G在GitHub上的表现。

需要修改两件事:

添加溢出:隐藏;到表格单元格。 添加表格布局:固定;到桌子。

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