Home/ Questions/Q 3966224
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T03:34:19+00:00

I need to display an HTML with various cells merged across rows. Here’s a

  • 0

I need to display an HTML with various cells merged across rows.

Here’s a test that illustrates the requirement and issue:-

<html>
    <head></head>
    <body>
        <table cellspacing="0" cellpadding="0" border="1">
            <tbody>
                <tr>
                    <td rowspan="2" style="height: 40px">
                        <div style="width: 100px;">RS=2</div>
                    </td>
                    <td rowspan="1" style="height: 20px">
                        <div style="width: 100px;">RS=1</div>
                    </td>
                    <td rowspan="3" style="height: 60px">
                        <div style="width: 100px;">RS=3</div>
                    </td>
                </tr>
                <tr>
                    <td rowspan="4" style="height: 80px">
                        <div style="width: 100px;">RS=4</div>
                    </td>
                </tr>
                <tr>
                    <td rowspan="2" style="height: 40px">
                        <div style="width: 100px;">RS=2</div>
                    </td>
                </tr>
                <tr>
                    <td rowspan="2" style="height: 40px">
                        <div style="width: 100px;">RS=2</div>
                    </td>
                </tr>
                <tr>
                    <td rowspan="1" style="height: 20px">
                        <div style="width: 100px;">RS=1</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

When displayed in Chrome it is OK, but in FF3.6 and IE8 it is not (look at the two “RS=2” in column one, they have the same rowspan and height but are visibly different). Row heights are incredibly important to me as I display another table next to this with single rows of fixed height that needs to align with this table).

Can anybody please advise how this can be corrected in Firefox and IE?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s a fix that works in Firefox but not Internet Explorer. Remove the height attribute from the cells, then either add

     style="height:20px;"

    to all rows OR

    add this style tag inside the head:

    <style>
tr{height:20px;}
</style>

    This works in Firefox and Chrome is unaffected, but IE still makes a mess.
    Firefox and IE both have a history of bugs when rendering tables.
    discussion of table cell height rendering bug in Firefox

    • 0