第一次接触EasyUi想要实现表格宽度自适应,网上找了好多文章,都没有实现,有网友实现了可是自己看不懂。可能是太简单高手都懒得分享,现在把自己的理解和实现记录一下,希望可以帮到向自己一样的菜鸟,步骤如下:

第一步,把table标签的属性“fitColumns”设置为“true”

第二步,经过第一步的设置后,此时给标题的td设置width属性,width的值此时设置为数字代表的就是宽度按百分比来设置,例如width:10,表示宽度为10%

代码如下:

<table class="easyui-datagrid" style="width:100%;"
data-options="singleSelect:true,collapsible:true,url:'demo/datagrid/datagrid_data1.json',method:'get',fitColumns:true">
<thead>
<tr>
<th data-options="field:'itemid',width:10">Item ID</th>
<th data-options="field:'productid',width:20">Product</th>
<th data-options="field:'listprice',width:10,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:10,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:40">Attribute</th>
<th data-options="field:'status',width:10,align:'center'">Status</th>
</tr>
</thead>
</table>

EasyUi 表格自适应宽度的更多相关文章

  1. 关于jqGrid组件表格无法自适应宽度问题

    今天生成了一个4列的表格,但是无法自适应宽度,使用 $(window).resize(function(){ $(window).unbind("onresize"); $(&qu ...

  2. easyui panel自适应浏览器宽度

    一.目标效果: 当浏览器窗口大小改变时.panel宽度始终为浏览器宽度的50%,panel高度则根据其中内容的多少而变化,横向竖向滚动条皆不出现.且不需要重新刷新浏览器或者其他js代码 兼容:chro ...

  3. 怎么设置table(表格)手机端自适应宽度

    我们在wordpress文章页面经常会用到表格,有些是从其他网页或者文档复制粘贴过来的,在电脑设备网页上都能很好的展示,但是在移动设备上或者低分辨率设备上却经常撑破列宽,很是影响美观和客户体验.这里就 ...

  4. easyui表格的增删改查

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. JS实现自适应宽度的Tag切换

    效果体验:http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码,实现TAB页切换效果,TAB标签根据内容自适应宽度,点击TAB标签切换内容页. ...

  6. easyUI 表格

    1.创建 <table id ="ID"></table> 2.属性 dategrid: columns 列的定义的数组 URl:访问远程数据的数组 [“t ...

  7. 设置表格td宽度

      CSS布局,表格宽度不听使唤的实例.想把表格第一例宽度设为20,其他自适应.但CSS中宽度是等宽的.只设这一行也不起作用.但是在实际应用中总是等宽处理,并不按照样式来走. XML/HTML代码 & ...

  8. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

  9. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

随机推荐

  1. 如何使 C++ 的 StringBuilder 提升 4350% 的性能?

    介绍 经常出现客户端打电话抱怨说:你们的程序慢如蜗牛.你开始检查可能的疑点:文件IO,数据库访问速度,甚至查看web服务. 但是这些可能的疑点都很正常,一点问题都没有. 你使用最顺手的性能分析工具分析 ...

  2. Java的基本使用

    1.如何运行一个Java源码 打开文本编辑器,输入以下代码: public class Hello { public static void main(String[] args) { System. ...

  3. 批量下载文件php

    做了个照片墙,要提供批量下载照片的功能,如果你会文件下载,那批量也是小菜一碟,就是把文件打包压缩为  zip 文件再下载,而php的内置类ZipArchive()让你很容易实现. 首先,配置php.i ...

  4. RAM 大全-DRAM, SRAM, SDRAM的关系与区别

    ROM和RAM指的都是半导体存储器,ROM是Read Only Memory的缩写,RAM是Random Access Memory的缩写.ROM在系统停止供电的时候仍然可以保持数据,而RAM通常都是 ...

  5. Qmake: Q_OBJECT

    QMake 为Qt的预编译,例:当在代码中使用 Q_OBJECT 宏,需要执行QMake操作,否则编译通不过.

  6. bzoj 4298 [ONTAK2015]Bajtocja——哈希+启发式合并

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4298 题面: 给定d张无向图,每张图都有n个点.一开始,在任何一张图中都没有任何边.接下来有 ...

  7. Oracle Like子句

    Oracle Like子句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,您将学习如何使用Oracle LIKE运算符来测试列中的值是否与指定 ...

  8. 180128-----Java面试题

    1 不用第三个变量,交换两个的值 a=1;b=2;a=a+b;b=a-b;a=a-b; 2 Java动态代理用什么实现? 反射

  9. JavaScript 查看stack trace

    How can I get a JavaScript stack trace when I throw an exception? Edit 2 (2017): In all modern brows ...

  10. tab下图表展示宽高为0的问题

    tab下,默认展示第一个tab(最新订阅),第二个tab是echarts,需要动态获取父级div的宽高并赋值到图表的DOM的宽高.在实际开发过程中,发现无论如何延迟处理,或者mounted,第二个ta ...