我一直在尝试找到一种能够对表进行排序和调整大小的方法,并找到了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>
答案 0 :(得分:0)
我知道解决此问题的唯一方法是更改表中的值。 (除了:用div构建表格或重新设计表格单元格)
如果您在字符串中添加­
,它会告诉浏览器它可以将字符串分成新行
浏览器不能在没有空格的情况下破坏字符串,如“ - ”。
答案 1 :(得分:0)
感谢Rob G在GitHub上的表现。
需要修改两件事:
添加溢出:隐藏;到表格单元格。 添加表格布局:固定;到桌子。
https://github.com/Mottie/tablesorter/issues/1175#issuecomment-193988250