为表格添加可调整列宽功能

1、引入js架包  <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>    

  <script src="js/colResizable-1.6.js" type="text/javascript"></script>  (该jar包是为表格添加列宽自定义功能)

2、table页面内容

  <table id="contentTable"
  class="table table-striped table-bordered table-condensed">
    <thead>
      <tr>
        <th>标题</th>
        <th>类型</th>
        <th class="sort-column login_name">状态</th>
        <th class="sort-column name">查阅状态</th>
        <th>更新时间</th>
     </tbody>
  </table>

4、js代码

  <script type="text/javascript">

    $(function() {

       $("table").colResizable();

     });

  </script>

 这样为你的表单加上table样式,你的表格就可以自定义拉升大小了。

4、附上官网地址

  jQuery插件来调整表列的大小


  官网地址:http://www.bacubacu.com/colresizable/

 colResizable-1.6插件下载地址:https://download.csdn.net/download/oranxiaoluo/10352596
 

原文地址:https://www.cnblogs.com/gywenlover/p/8856397.html

时间: 2024-10-10 19:55:54

为表格添加可调整列宽功能的相关文章

CSS 控制table 滑动及调整列宽等问题总结

一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的height高度.然后设置overflow-y:scroll.这样当内容高度超过了height设定的高度,就会出现滚动条 css: .scroll_y{ max-height: 200px; /* 宽度大概比表头宽17px,具体值实际调试 */ width:531px; overflow-y: scrol

C# dataGridView根据数据调整列宽

1 //自适应列宽 2 3 this.dgvBaoming.AutoSizeColumnsMode = System.Windows.Forms.DataGridViewAutoSizeColumnsMode.AllCells; //平铺均分列宽 this.dgvBaoming.AutoSizeColumnsMode = System.Windows.Forms.DataGridViewAutoSizeColumnsMode.Fills;

Js + Bootstrap Table + adminlte - 自定义formatter,在表格内添加箭头样式,调整列宽

var drawDataTable=function(chartId){ var dataList = [ { "criteria": "q>100", "count": "400 up", "cRatio": "10% up", "pRatio": "60% up" }, { "criteria": "50&l

使用jqueryUI实现自由调整表格列宽

今天项目中需要插入表格,用Excel表格调整列宽时,想怎么拖就怎么拖,于是乎就让插入的表格也这么让人舒服.网上查找许久,没找到好用的方案.最后发现jQuery UI中的resizable()方法可以实现div的自由调整,既然可以在div上实现,那表格也应该没问题吧.于是就动手折腾,成功搞定. 代码详情: main.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn

MS WORD 表格自动调整列宽,自动变漂亮,根据内容自动调整 .

在MS WORD中,当有大量的表格出现时,调整每个表格的的高和宽和大小将是一件非常累的事情,拖来拖去,非常耗时间,而且当WORD文档达到300页以上时,调整反应非常的慢,每次拖拉线后,需要等待一段时间其才完成调整,劳心劳力. 其实解决这个问题有一个很好的办法,MS WORD做的这个功能确实不错,有一定的智能性.这个功能就是表格的自动调整功能.表格的自动调整功能有根据内容调整表格和根据窗口调整表格. 一.表格根据内容自动调整 1.根据内容调整表格 主要利器之一,当表格比较凌乱,内容较少时,用它可以

1. DataGridView设置字体、行高、列宽、单列居中

DataGridView表格内容的列宽.行高.字体的设置,设置某一列居中.一般地,会将行高设为统一的,列宽根据不同情况设定. [csharp] view plaincopyprint? // 调整字体 dataGridView1.Font = new Font("宋体", 11); // 调整行高 //dataGridView1.Rows[0].Height = 100; dataGridView1.RowTemplate.Height = 30; dataGridView1.Upda

【WinForm】DatagridView列宽设置与对齐方式

一.设置对齐方式 1.列标题居中对齐 dataGridView1.ColumnHeadersDefaultCellStyle.Alignment = DataGridViewContentAlignment.MiddleCenter; 但实际上看上去仍然偏左,这是因为存在排序三角形,可以设置列的SortMode属性值为DataGridViewColumnSortMode.NotSortable,但是失去排序功能. 2.内容居中对齐 dataGridView1.DefaultCellStyle.A

angualr项目table拖拽列宽效果

首先要有一个table的html列表 我就不上了,因为加载有异步的问题,所以我把js代码放到一个封装函数里面,表格加载出来之后调用函数,这个表格的dom就能找到了.下面是封装的js代码 //拖拽调整列宽 $rootScope.searchTable= function(){ var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 var table = document.getElementsByClassName('table'); console.log(t

DatagridView列宽设置与对齐方式

一.设置对齐方式 1.列标题居中对齐 dataGridView1.ColumnHeadersDefaultCellStyle.Alignment = DataGridViewContentAlignment.MiddleCenter; 但实际上看上去仍然偏左,这是因为存在排序三角形,需要取消排序功能 2.内容居中对齐 dataGridView1.DefaultCellStyle.Alignment = System.Windows.Forms.DataGridViewContentAlignme