CSS: 'table-layout: fixed' and border-box sizing of cells in Safari

Question

I have a simple table, with a header and table body. All the cells are supposed to be fixed width, only one is variable (e.g. name).

I need table-layout: fixed in order to use text-overflow: ellipsis on the variable-width cells.

Here's the CSS for the table:

table {
    width: 550px;
    border: 1px solid #AAA;
    table-layout: fixed;
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid #DDD;
    text-align: left;
    padding: 5px 15px 5px 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.one {
    width: 60px;
}
.two {
    width: auto;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.three, .four, .five {
    width: 90px;
}

Check the HTML, along with a demo.

I'm trying to get this table behave the same in all browsers, but it seems that box-sizing: border-box is ignored in Safari. Although according to this answer, it should be a fix to a bug in older versions of Safari.

Here's how it looks in Chrome:

And how it looks in Safari 6.0.3:

This problem is also present in all newer Safari for Mac that I tested. I'm almost sure I tested it a week ago in Safari, both old and new and it worked fine. It is somehow like the new Safari suddenly got a new kind of bug.

I'm using Safari Version 6.0.3 (7536.28.10). Old Safari Version 5.0.5 (6533.21.1, 6533.21) seems to be working fine.

People, help me before going mad! Am I doing something wrong here or is it truly a bug?

Answer 1

A better approach would be to remove the table completely and use CSS but if that's not possible I'd suggest trying some browser specific css for the table that only affects safari

jquery code

if ($.browser.safari) {
                $("html").addClass("saf");
            };

and then in your css

.saf table
{
// any adjustments required
}

although if using this approach I'd suggest an id on the table at least. I cant claim credit for this approach as I found it on StackOverflow but its what I use when I only require a few browser specific hacks

update

Just encase anyone stumbles upon this error, as pointed out in comment below $.browser has been removed in version 1.9 of jquery so an alternative is to use modernizr.js and use code like below

<script type="text/javascript">                             
    $(document).ready(function () {

        Modernizr.addTest('ff', function () {
            return !!navigator.userAgent.match(/firefox/i);
        });
        Modernizr.addTest('gc', function () {
            return !!navigator.userAgent.match(/chrome/i);
        });
        Modernizr.addTest('saf', function () {
            return !!navigator.userAgent.match(/safari/i);
        });      
        Modernizr.addTest('op', function () {
            return !!navigator.userAgent.match(/opera/i);
        });
    })           
</script>

Answer 2

Just try this one, you can use:

<table width="100%" cellspacing="0">
<colgroup>
<col width="specific width of the column 1"/>
<col width="specific width of the column 2"/>
and so on
</colgroup>
<thead>
</thead>
<tbody>
</tbody>
</table>