Why isn't this HTML table working properly in Chrome?

I fixed this problem myself today using table-layout: fixed and box-sizing: border-box to force Chrome to stop taking padding into account. Otherwise you never know what sizing model Chrome will pick, even for two very similar tables.

Well, my math says Chrome's doing what it should:

102 + 102 + 46 = 250px -> Widths

2(5) + 2(5) +2(5) = 10 + 10 + 10 = 30px -> Padding

Widths + Padding = 250 + 30 = 280px, or the width you specified for the table.

my method to fix this, executed for chrome browser only. We only use fixed tables in our web app and it seems working good, it's good to know that sometimes Chrome dimensions the col width perfectly, but sometimes not depending on where the table is located (and most of it inside what it's located).

                var correctedWidth;                var extraSize;                //chrome is taking the padding and border to calculate the column width , not other browsers                $('table.default.fixed > thead > tr > th').each(function()                {                    if ($(this).attr('width')!='undefined' && $(this).attr('width')!=null)                    {                        if ($(this).attr('sizeUpdated')=="undefined" || $(this).attr('sizeUpdated')==null) {                            extraSize = parseInt($(this).css('padding-left'))+parseInt($(this).css('padding-right'))+2; //2 for the borders (2*1px)                            if ( parseInt($(this).attr('width'))!= $(this).width() )                            {                                correctedWidth=$(this).width()+2*(extraSize);                            }                            else                            {                                correctedWidth=$(this).width()+extraSize;                            }                            $(this).attr('width',correctedWidth+'px');                            $(this).attr('sizeUpdated','Y');                        }                    }                });