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

最新推荐文章于 2023-08-01 22:51:01 发布

QQ40153258

最新推荐文章于 2023-08-01 22:51:01 发布

阅读量2.5k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liunianfeiyu/p/10253251.html

版权

博客探讨了在HTML的colgroup中如何使用col来定义表格单元格的宽度，包括像素和百分比两种方式，以及它们在组合使用时的计算规则和特殊情况。当宽度设置超出限制时，内容宽度和占比会发生相应变化。

摘要由CSDN通过智能技术生成

　　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%"/>