colgroup中col定义表格单元格宽度
colgroup中可以使用col来定义表格单元格宽度，可以使用像素（数字），百分比，我们来具体看看有什么不同。
先看一个最基本的：用像素（数字）表示，因为table有个宽度，这里表示占比
<html><body><table width="1000px" border="1px" cellspacing="0" cellpadding="0"><colgroup><col width="100px"/><col width="200px"/><col width="300px"/><col width="400px"/></colgroup><tr><td>11111</td><td>22222</td><td>33333</td><td>44444</td></tr></table></body> </html>
数字表示占比多少，每个长度即：数/数相加*witdh
<html><body><table width="1000px" border="1px" cellspacing="0" cellpadding="0"><colgroup><col width="50"/><col width="150"/><col width="100"/><col width="200"/></colgroup><tr><td>11111</td><td>22222</td><td>33333</td><td>44444</td></tr></table></body> </html>
用百分比表示：与数字效果相同，表示占比：比例/比例和*width是长度
<html><body><table width="1000px" border="1px" cellspacing="0" cellpadding="0"><colgroup><col width="5%"/><col width="15%"/><col width="10%"/><col width="20%"/></colgroup><tr><td>11111</td><td>22222</td><td>33333</td><td>44444</td></tr></table></body> </html>
下面看像素和百分比组合：可以看出是先计算百分比（真实百分比），再算像素的占比
<html><body><table width="1000px" border="1px" cellspacing="0" cellpadding="0"><colgroup><col width="100px"/><col width="200px"/><col width="10%"/><col width="15%"/></colgroup><tr><td>11111</td><td>22222</td><td>33333</td><td>44444</td></tr></table></body> </html>
如果占比过大会怎么样，可以看到像素宽度被压缩到内容宽度，百分比宽度的比例也变化了
<html><body><table width="1000px" border="1px" cellspacing="0" cellpadding="0"><colgroup><col width="100px"/><col width="200px"/><col width="40%"/><col width="80%"/></colgroup><tr><td>11111</td><td>22222</td><td>33333</td><td>44444</td></tr></table></body> </html>
如果像素过大呢？可以看到百分比是真实百分比，像素大小转换成占比
<html><body><table width="1000px" border="1px" cellspacing="0" cellpadding="0"><colgroup><col width="400px"/><col width="800px"/><col width="10%"/><col width="30%"/></colgroup><tr><td>11111</td><td>22222</td><td>33333</td><td>44444</td></tr></table></body> </html>
如果有一个宽度不指定呢
正常情况会占据剩余宽度
<html><body><table width="1000px" border="1px" cellspacing="0" cellpadding="0"><colgroup><col width="100px"/><col width="200px"/><col width="300px"/><col/></colgroup><tr><td>11111</td><td>22222</td><td>33333</td><td>44444</td></tr></table></body> </html>
<html><body><table width="1000px" border="1px" cellspacing="0" cellpadding="0"><colgroup><col width="10%"/><col width="20%"/><col width="30%"/><col/></colgroup><tr><td>11111</td><td>22222</td><td>33333</td><td>44444</td></tr></table></body> </html>
<html><body><table width="1000px" border="1px" cellspacing="0" cellpadding="0"><colgroup><col width="10%"/><col width="20%"/><col width="300px"/><col/></colgroup><tr><td>11111</td><td>22222</td><td>33333</td><td>44444</td></tr></table></body> </html>
如果过大呢？
不指定的宽度变成内容实际宽度，其它宽度比例也改变了
<html><body><table width="1000px" border="1px" cellspacing="0" cellpadding="0"><colgroup><col width="200px"/><col width="400px"/><col width="600px"/><col/></colgroup><tr><td>11111</td><td>22222</td><td>33333</td><td>44444</td></tr></table></body> </html>
<html><body><table width="1000px" border="1px" cellspacing="0" cellpadding="0"><colgroup><col width="20%"/><col width="40%"/><col width="60%"/><col/></colgroup><tr><td>11111</td><td>22222</td><td>33333</td><td>44444</td></tr></table></body> </html>
<html><body><table width="1000px" border="1px" cellspacing="0" cellpadding="0"><colgroup><col width="200px"/><col width="40%"/><col width="60%"/><col/></colgroup><tr><td>11111</td><td>22222</td><td>33333</td><td>44444</td></tr></table></body> </html>
转载于:https://www.cnblogs.com/liunianfeiyu/p/10253251.html
colgroup中col定义表格单元格宽度相关推荐
- poi设置word表格单元格宽度_xwpftable设置宽度；POI操作Word设置表格宽度
poi 操作word里表格,如设置表格宽度.行高.表格样式等. 1.表格或单元格宽度: 默认TblW的type属性为STTblWidth.AUTO,即自动伸缩.所以要调整为指定类型:STTblWidt ...
- poi设置word表格单元格宽度_poi,word,表格样式
第 1 页 共 17 页 竭诚为您提供优质文档 / 双击可除 poi,word, 表格样式 篇一: poi 操作 wrod 技巧 1. 表格或单元格宽度: 默认 tblw 的 type 属性为 stt ...
- poi设置word表格单元格宽度_poi导出word表格的操作讲解
一.效果如下 二.js代码 function export_word(){ //导出word var url = "czzsca/exportWord.do"; this.expo ...
- poi设置word表格单元格宽度_java poi如何设置word的页面的大小和水平方向？
展开全部 你好,试试以下代码行不行. package com.sample; import java.awt.color; import java.io.fileoutputstream; impor ...
- poi设置word表格单元格宽度_java poi 设置word 格式如表格一类的
2012-05-29 回答 你好,试试以下代码行不行. package com.sample; import java.awt.color; import java.io.fileoutputstre ...
- 拖动 html表格单元格宽度,jQuery实现拖动调整表格单元格大小的代码实例
jQuery实现的拖动调整表格td单元格的大小: 在实际应用中,可能有这样的需求,那就是需要调整td单元格的大小. 也许是为了便于观察,也许是其他原因,反正这样的需求是有的,下面就分享一段能够实现此功 ...
- poi设置word表格单元格宽度_java poi 生成word表格 怎么逐列设置列宽
九州编程 public static int[] COLUMN_WIDTHS = new int[] {1504,1504,1504,1504,1504,1504}; setTableGridCol( ...
- html中如何定义斜框,html表格单元格添加斜下框线的方法
一.分隔单元格的方法 1.用"transform: rotate(-55deg);"把一条水平线旋转一定角度就成斜线了 2.利用以下命令调整分割线位置等. :after :befo ...
- html怎么设置一个表格的宽度一样吗,html表格单元格大小 怎样在html中设置所有表格大小一样...
在html中怎样控制表格的宽度 表格的宽度设置都知道: .. 宽度虽然是这样设置的,但是的内容如果超出就还是可能会改变table的宽度, 这样就有两种情况,如果你不想改变宽且也不想改变行高,可是设置: ...
最新文章
- 利用Matlab设计滤波器（FDAT)
- 次梯度（subgradient）
- 用盛金公式求解一元三次方程
- python怎么引用多行输入_python调用shell返回两行第二行需要输入密码怎么办？import os os.syst...
- dotnet 是 前30个增长最快速度的开源项目中排名第一的开发平台
- forge开发_使用Forge，WildFly Swarm和Arquillian开发微服务
- 易流即时配送_即时大数据流处理=即时风暴
- treeset 是有序吗_TreeSet如何实现有序?
- 如何通过SCJP考试（含真题分析和考点）
- TC4056A丝印1A 线性锂离子电池充电IC
- 幼儿园语言活动包括哪几类_幼儿园语言教学活动提问的类型及优化设计
- KeyMob聚合广告携手开发者 共谋移动应用广告的福利
- “创宇ADS”获公安部颁发《计算机信息系统安全专用产品销售许可证》！
- 买股票也要会买跌，股票不是只有涨的时候才能买的
- 关于mybatis 的一些实验
- 英语日常短语积累（4）—银行考试真题
- python爬取每日一文meiriyiwen.com
- 合并两个有序表到新的有序表
- 如何分析个股基本面_如何从基本面判断个股？
- 好用计算机,六款让你电脑更好用的软件