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>
colgroup中col定义表格单元格宽度的更多相关文章
- 关于html表格单元格宽度的计算规则
* { margin: 0; padding: 0 } body { background: #fafafa } ul,li { list-style: none } h1 { margin: 20p ...
- CSS开发技巧(二）：表格合并边框后的单元格宽度计算
前言: 分离边框模型和合并边框模型是表格的两种模型,它通过以下属性确定: border-collapse:separate(默认值) | collapse | inherit 当采用分离边框模型时,表 ...
- EXCEL表格单元格中包含数字英文和汉字，如何自动去掉汉字，保留英文和数字
EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字 Function 求数字和字母(对象 As String) '在文本与数字混杂中提取数字和字母 Dim myReg ...
- 表格单元格td设置宽度无效的解决办法 .
http://zzstudy.offcn.com/archives/11366 在做table页面时,有时对td设置的宽度是无效的,td的宽度始终有内部的内容撑开,可以设置padding,但直接设置w ...
- Easyui datagrid 设置内容超过单元格宽度时自动换行显示
datagrid 设置内容超过单元格宽度时自动换行显示 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 单元格内容超过单元格宽度不会自动化换行.如下 ...
- 关于.net Microsoft.Office.Interop.Word组建操作word的问题，如何控制word表格单元格内部段落的样式。
控制word表格单元格内部文字样式.我要将数据导出到word当中,对于word表格一个单元格中的一段文字,要设置不同的样式,比如第一行文字作为标题要居中,加粗,第二行为正常的正文. 代码如下 publ ...
- JQuery合并表格单元格
转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格 一.需求 如果存在一个表格,想把其中某一列内容相同的部分合并单元格, ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
- 更改jupyter notebook的单元格宽度和主题颜色(theme)
一.单元格宽度 这个命令: jt -t gruvboxl -f roboto -fs 12 -cellw 100% -T -N 它将宽度设置为100% 二.主题颜色 在用jupyter noteboo ...
随机推荐
- git之win安装git和环境配置及常用命令总结
12.windowns安装git和环境变量配置 11.git之常见命令总结 ===== 12.windowns安装git和环境变量配置 ; 转自 https://wuzhuti.cn/2385.htm ...
- [UE4]Child Widget 留白 padding
child widget公开一个变量设置padding是一个比较好的设计方案.
- [UE4]条件语句Select
select接收3个参数,输出一个值. 当条件为true时,返回输入到True节点的值. 当条件为false时,返回输入到false节点的值. select的输入和输出参数也可以是整数.float.V ...
- linux驱动开发—基于Device tree机制的驱动编写
前言Device Tree是一种用来描述硬件的数据结构,类似板级描述语言,起源于OpenFirmware(OF).在目前广泛使用的Linux kernel 2.6.x版本中,对于不同平台.不同硬件,往 ...
- sas 日期比较代码备忘
DATA A; SET S.payrecordinfo; YY=DATEPART(AddTime); FORMAT YY MMDDYY10.;RUN; DATA A1; SET ...
- Spring MVC 处理列表和数组数据
SpringMVC处理列表和数组类型: 当form提交多个参数时,可以使用@RequestParam(value="")注解将其注入到列表或数组中,否则参数无法传值 1 contr ...
- delphi正则表达式学习笔记（二）
正则表达式大全 字符 描述 \ 将下一个字符标记为一个特殊字符.或一个原义字符.或一个向后引用.或一个八进制转义符.例如,"n"匹配字符"n"."\n ...
- DB通用类：Sqlite通用类库
Sqlite通用类库 using System; using System.Collections; using System.Collections.Generic; using System.IO ...
- CS229 6.16 Neurons Networks linear decoders and its implements
Sparse AutoEncoder是一个三层结构的网络,分别为输入输出与隐层,前边自编码器的描述可知,神经网络中的神经元都采用相同的激励函数,Linear Decoders 修改了自编码器的定义,对 ...
- solr 使用edismax来控制评分
如何控制评分 如果设置了sort字段,那么将会按照sort字段的顺序返回结果. 如果没有设置sort字段,那么将会根据相关度打分来排序.也就是说,相关度更高的排在前面. 如何来定制适合自身业务的排序打 ...