HTML多行存在colspan时宽度问题

最新推荐文章于 2023-05-12 02:15:11 发布

cankykong1

最新推荐文章于 2023-05-12 02:15:11 发布

阅读量2.6k

点赞数

分类专栏： css web

css 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

web

5 篇文章 0 订阅

订阅专栏

当多行存在colspan时,可能出现colspan少的单元格宽度不正确的情况，详细举例如下：

You can't have overlapping colspans of different widths, the table cells need to line up. You're trying to draw this table:

目标表格:

|-----|----------|
|----------|-----|

如果用自动表格布局,则表格会变成这样：

|----------|----------|
|----------|----------|

Which is not valid since the columns don't line up. In order to do this you need to add more columns:

因为浏览器是在绘制所有行后,每一列找最宽的作为该列的宽度,所以就到有些单元格被拉长了

要浏览器知道怎样绘制,可以在最后加入一个4个单元格的空行,这样,浏览器就能正确显示,

第二种方法是使用fixed布局,然后加上col对列的宽度进行控制：

|-----|----.-----|
|-----.----|-----|

Where "." is a column that is hidden by the column span. Try this HTML:

<!DOCTYPE HTML>

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <table border="1" style="table-layout: fixed;">
            <col style="width: 20px;"/>
            <col style="width: 30px;"/>
            <col style="width: 20px;"/>
            <tbody>
                <tr>
                    <td>20</td>
                    <td colspan="2">50</td>
                </tr>
                <tr>
                    <td colspan="2">50</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>