①、引入jQuery和colResizable的js文件(colResizable支持表格拖动改变列宽)
colResizable下载地址:http://www.bacubacu.com/colresizable/#rangeSlider
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src = "colResizable-1.6.min.js" ></script>
②、js代码
<script type="text/javascript">
$(function(){
//此处实现表格可拖放属性
$("#table").colResizable({
liveDrag:true,//实现实时拖动,可看见拖动轨迹
draggingClass:"dragging", //防止拖动出险虚标线
});
});
</script>
③、css代码
<style type="text/css">
table{
width:100%;
border-collapse: collapse;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
td{
border:1px solid;
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
white-space:nowrap; /* 不换行 */
text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用*/
}
</style>