通知
此博客运行在jpress系统上，如果你喜欢此博客模板，请加QQ群：1061691290（whimurmur模板/jpress插件），免费下载使用

colgroup中col定义表格单元格宽度

4056人浏览 / 0人评论 | 作者：whisper  | 分类： html  | 标签： 前端  /  html  | 

作者：whisper

链接：http://proprogrammar.com:443/article/48

声明：请尊重原作者的劳动，如需转载请注明出处

      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>

亲爱的读者：有时间可以点赞评论一下

我慒慒懂懂过了一年，这一年似乎没有改变，守着一个人的世界，空空如也
点赞(40) 打赏

相关文章

jquery实现背景图片动态适应
jquery实现背景图片动态适应
js脚本代码调试小技巧
js脚本代码调试小技巧
xslt基础学习
xslt基础学习

作者其它文章

数据结构 绪论
数据结构 绪论
数据结构第一章 线性表
数据结构第一章 线性表
考研数学导学
考研数学导学

全部评论

还没有评论！