通知
  • 关于网站更多信息请加QQ群(1061691290)
  • jpress升级到4.x，显示有些问题，修复中
  • 网站还会持续更新

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

6084人浏览 / 0人评论 / 页 | 作者：因情语写  | 分类： html  | 标签： 前端  /  html  | 

作者：因情语写

链接：https://www.proprogrammar.com/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基础学习

作者其它文章

深喉，强奸2-制服诱惑，活着，从你的全世界路过
深喉，强奸2-制服诱惑，活着，从你的全世界路过
一章一节 行列式 行列式的定义
一章一节 行列式 行列式的定义
五章 大数定律及中心极限定理
五章 大数定律及中心极限定理

全部评论

还没有评论！