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 ...
随机推荐
- Hive - ORC 文件存储格式【转】
一.ORC File文件结构 ORC的全称是(Optimized Row Columnar),ORC文件格式是一种Hadoop生态圈中的列式存储格式,它的产生早在2013年初,最初产生自Apache ...
- centos7图形化界面安装后，意外出现Please make your choice from above ['q' to quit | 'c' to continue | 'r' to refresh]
安装完成centos7-GUI后出现如下提示: nitial setup of CentOS Linux (core) ) [x] Creat user ) [!] License informati ...
- SCCM2012 R2实战系列之十一：解决OSD分发Windows7 系统盘盘符为’D’问题
在SCCM 2012 R2操作系统分发(OSD)中,大家最早做的实验可能就是分发干净的Windows7和Windows 8(或Windows8.1)了吧.但是不可面对的问题就是相同配置的任务序列(只是 ...
- AnimDynamics简介
转自:http://www.cnblogs.com/corgi/p/5405452.html AnimDynamics简介 AnimDynamics是UE4.11 Preview 5测试版本发布的An ...
- docker设置容器固定ip
docker安装后,默认会创建三种网络类型,bridge.host和none,可通过如下命令查看 sudo docker network ls 1 bridge:网络桥接 默认情况下启动.创建容器都是 ...
- 对KVM虚拟机进行cpu pinning配置的方法
这篇文章主要介绍了对KVM虚拟机进行cpu pinning配置的方法,通过文中的各种virsh命令可进行操作,需要的朋友可以参考下 首先需求了解基本的信息 1 宿主机CPU特性查看 使用virsh n ...
- python访问hive
#!/usr/bin/env python # -*- coding: utf-8 -*- # hive util with hive server2 """ @auth ...
- 安全测试6_Web安全工具第三节（Web安全工具）
之前学习了下安全工具前的一些基础知识,今天来学习下安全工具,这些工具是python写的. 1.敏感文件探测入门: 敏感文件探测的原理如下: 一般探测敏感文件我们都是借助工具扫描,这里我给大家推荐一个简 ...
- Mysql5.7 Linux安装教程
1系统约定安装文件下载目录:/data/softwareMysql目录安装位置:/usr/local/mysql数据库保存位置:/data/mysql日志保存位置:/data/log/mysql 2下 ...
- C++ Sleep() sleep()
简介: 函数名: sleep 功 能: 执行挂起一段时间 用 法: unsigned sleep(unsigned seconds); 在VC中使用带上头文件 #include <windows ...