colspan width issue

前端未结

关注

 2  1930

名媛妹妹

I\'m having trouble setting fixed widths on columns which use colspan.

It seems that neither IE8, Firefox or Chrome can figure out how to correctly size

相关标签:

2条回答

温柔的废话

2021-01-07 18:07

It has to do with the way browsers calculate the widths for each column. Tables require more overhead because of their flexible nature and more than 1 pass depending on what dimensions you set and content.

To make a long story short, colspan on the first row when you want to set column widths on subsequent rows gums up the works. There are plenty of good ways to fix it, a bad way, however easy would be to have the very first row with 1 pixel of height setting the trend for the column widths.

0 讨论(0)
发布评论:

提交评论
- 加载中...

误落风尘

2021-01-07 18:23

Because your column widths are contradicting. In row 1 you have columns widths 20, 50/2; in row 2 you have column widths 50/2, 20.

Row 1, Column 1 is defined as 20.
Row 1, Column 2 is defined as 50.
Row 2, Column 1 is defined as 50.
Row 2, Column 2 is defined as 20.

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:

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

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;">
            <colgroup>
                <col style="width: 20px;"/>
                <col style="width: 30px;"/>
                <col style="width: 20px;"/>
            </colgroup>
            <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>

0 讨论(0)