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定义表格单元格宽度的更多相关文章

  1. 关于html表格单元格宽度的计算规则

    * { margin: 0; padding: 0 } body { background: #fafafa } ul,li { list-style: none } h1 { margin: 20p ...

  2. CSS开发技巧(二）：表格合并边框后的单元格宽度计算

    前言: 分离边框模型和合并边框模型是表格的两种模型,它通过以下属性确定: border-collapse:separate(默认值) | collapse | inherit 当采用分离边框模型时,表 ...

  3. EXCEL表格单元格中包含数字英文和汉字，如何自动去掉汉字，保留英文和数字

    EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字 Function 求数字和字母(对象 As String) '在文本与数字混杂中提取数字和字母   Dim myReg    ...

  4. 表格单元格td设置宽度无效的解决办法 .

    http://zzstudy.offcn.com/archives/11366 在做table页面时,有时对td设置的宽度是无效的,td的宽度始终有内部的内容撑开,可以设置padding,但直接设置w ...

  5. Easyui datagrid 设置内容超过单元格宽度时自动换行显示

    datagrid 设置内容超过单元格宽度时自动换行显示 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 单元格内容超过单元格宽度不会自动化换行.如下 ...

  6. 关于.net Microsoft.Office.Interop.Word组建操作word的问题，如何控制word表格单元格内部段落的样式。

    控制word表格单元格内部文字样式.我要将数据导出到word当中,对于word表格一个单元格中的一段文字,要设置不同的样式,比如第一行文字作为标题要居中,加粗,第二行为正常的正文. 代码如下 publ ...

  7. JQuery合并表格单元格

    转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格   一.需求 如果存在一个表格,想把其中某一列内容相同的部分合并单元格, ...

  8. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  9. 更改jupyter notebook的单元格宽度和主题颜色(theme)

    一.单元格宽度 这个命令: jt -t gruvboxl -f roboto -fs 12 -cellw 100% -T -N 它将宽度设置为100% 二.主题颜色 在用jupyter noteboo ...

随机推荐

  1. 三种通用应用层协议protobuf、thrift、avro对比,完爆xml,json,http

    原文: https://www.douban.com/note/523340109/ Google protobuf: 优点  二进制消息,性能好/效率高(空间和时间效率都很不错)     proto ...

  2. c#day04从控制台获取一个字符

    class EnumStruct { //定义QQ的状态枚举 Qme QnLine OffLine Leave Busy //提示用户现在一个状态 然后接收 ,并将用户输入转换成枚举类 enum Qs ...

  3. ORA-22922: 不存在的 LOB 值 可以使用外层嵌套wm_concat()解决

    select kw0408id, sjbh, ksrs, kch, to_char(wm_concat(kcmc)) as kcmc, ksxs, kssc, ksfs, kcxz, xsyx, nj ...

  4. POJ3159 Candies

    #include <iostream> #include <queue> #include <cstring> #define maxn 30005 #define ...

  5. C# 将本地文件远程拷贝到其他电脑(转)

    string newpath = System.IO.Path.GetFullPath(@"////10.144.26.252//d$//quyuan//图片" +"// ...

  6. kafka的几个简单操作

    怎么安装解压kafka这里就不多说了,从配置文件说起 我这里搭建的是三节点集群 master  slave1 slave2 修改server.properties 文件 把自己本地安装的zookeep ...

  7. CS229 5.用正则化(Regularization)来解决过拟合

    1 过拟合 过拟合就是训练模型的过程中,模型过度拟合训练数据,而不能很好的泛化到测试数据集上.出现over-fitting的原因是多方面的: 1) 训练数据过少,数据量与数据噪声是成反比的,少量数据导 ...

  8. jquery鼠标放上去显示悬浮层即弹出定位的div层

    <div><a id="a1" onmouseover="javascript:show('a1','div1');" onmouseout= ...

  9. java开发_""和null的区别

    转自:http://www.cnblogs.com/hongten/archive/2012/11/08/java_null.html#undefined 在代码中: 1 //name可以为" ...

  10. Vuejs自定义全局组件--loading

    不管是使用框架,还是不使用任何的框架,我们都不可避免的需要与“加载中……”打交道,刚刚学习了Vuejs自定义组件的写法,就现学现卖,介绍一下吧! 先看一下目录结构,一般情况下,每一个组件都新建一个新的 ...