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

通知网站从因情语写改为晴雨，这个网站的模板也从calmlog_ex改为 whimurmur

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

3961人浏览 / 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) 打赏

全部评论

还没有评论！

广告位-帮帮忙点下广告

注册登陆

搜索

听雨落下的声音

月份	原创文章数
202104	11
202103	55
202102	14
202010	3
202009	3
202008	7
202007	7
202006	10
202005	11
202004	22
202003	52
202002	44
202001	83
201912	52
201911	29
201910	41
201909	99
201908	35
201907	73
201906	121
201811	1
201810	2
201804	1
201803	1
201802	1
201707	1

月份	转载文章数
202104	16
202103	10
202102	3
202009	5
202008	3
202007	17
202005	17
202004	23
202003	11
202002	2
201912	13
201909	1

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

相关文章

作者其它文章

全部评论