Chrome bug - table cell height and rowspan

While working my way through some not-so-complicated tables earlier today, I ran into a Chrome bug (I believe) with table cell heights when using a rowspan.

This table will render incorrectly in Chrome:

1
2
3

The first two cells on the left will collapse to be as small as they can - just large enough for the text they contain.  The third cell will then become very tall to cover the remaining space.  In Firefox and Internet Explorer, all cells are equally spaces, as is the expected outcome.  I’ve written up a more detailed bug report on the 3-1 Design site.

7 Responses to “Chrome bug - table cell height and rowspan”

  1. Nazar says:

    Hey, I was doing something similar and while looking at results i noticed Safari and Chrome going crazy. I googled the issue and found ur blog. So any updates on that issue? I am too lazy to cut all my images in pieces now :D

  2. torgie says:

    Unfortunately, I don’t think there’s any kind of fix for this! I hacked and hacked at this when I first found it, but so far no luck…

    definitely let me know if you find any new information!

  3. Dennis says:

    Thanks for noticing this. And thanks torgie for mentioning “hacked and hacked at this when I first found it.” That just save me about 2 hours this morning! I’ll live with it (along with square corners on my IE divs) for now.

  4. turkmenistan says:

    1

    2
    3

    this hack must work

  5. turkmenistan says:

    border: 1px #F00 solid; height:66px;

  6. Jack says:

    Hello, same problem here.. this is an old problem :\

    with so many diferences in browsers the tag table is the best scenario for most problems . they don’t fixed yet its probally the way the engine works or something like that..

    my workaround for this is to create another table inside the td instead of using rowspan, but this becomes a problem when having many tables. Sorry if you already know that lol .

    **forgets google and create a table**

  7. YaSri says:

    I solved the issue by dynamically adjusting the rows height after the page is completely rendered. Sample js is as follows,
    1. give every row of the table a unique id
    2. get the td height that is spanning multiple rows, using “element.offsetHeight”
    2. now iterate over each row and set the height.

Leave a Reply