第一次接触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# 实现二维数组的排序算法(代码)

    class Order { /// <summary> /// 对二维数组排序 /// </summary> /// <param name="values&q ...

  2. vue 父子组件渲染

    问题描述:父组件调用了一个子组件,传递了一个id的属性到子组件, 但是在子组件中将这个id的props属性赋值给了data里面定义的另外一个属性myId,并且写了watch监听这个id的props. ...

  3. 主流Linux可视化运维面板&安装包

    一.AMH面板 1.官方网站 官方网站:http://amh.sh 2.面板介绍 截止到AMH4. 2 版本都是提供免费安装的,后来从5. 0 开始提供付费安装,可以理解开发者的盈利问题,毕竟提供免费 ...

  4. LuceneNET全文检索封装

    一.源码特点       1.  Lucene.net是Lucene的.net移植版本,是一个开源的全文检索引擎开发包,即它不是一个完整的全文检索引擎,而是一个全文检索引擎的架构,提供了完整的查询引擎 ...

  5. win7不正常开关机,系统恢复选项

    会win7不正常开关机后,会默认进入“系统回复选项”. 无人值守的机器远程会无法连接,默认会进入此界面. 解决方法: 到现场,鼠标.键盘.显示器, 开机后选择正常启动, 在命令行模式输入以下命令bcd ...

  6. such as, for example, include和contain

    such as 后接动词,通常用动名词,有时也可用动词原形 for example 后接动词,用动名词 include vt. 包含,包括 后接动词,用动名词 英英: If one thing inc ...

  7. 接口开发01--mock接口

    开发接口的常见场景: 1.mock接口,模拟一些接口,在别的接口没有开发好的时候,你需要测试,可以先模拟一个假接口来测试.比如常见 2.若需要调用第三方接口时,比如支付接口. 3.查看数据,比如开放数 ...

  8. jmeter之自动重定向和跟随重定向用法

    jmeter工具里面有自动重定向和跟随重定向这2种选择,那么他们到底有啥区别呢? 目录 1.自动重定向和跟随重定向 2.举个例子 1.自动重定向和跟随重定向 01.3XX的请求一般要使用跟随重定向,2 ...

  9. delphi中的inpubox,如何能控制它的位置? 10

    https://zhidao.baidu.com/question/153270855.html delphi中的inpubox,如何能控制它的位置? 10 RT ! 前辈!最好你就把那代码都拿出来吧 ...

  10. http://bbs.csdn.net/topics/340046630 dbgrid怎么获取当前记录值

    这根grid无关,当你选中一条记录时,数据集就定位到这条数据上了,你只需要读取数据集中的数据就行了   对我有用[0] 丢个板砖[0] 引用 | 举报| 管理 hongss hongss 本版等级: ...