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?

Memberg

Can you screenshot a demo and maybe mark what's precisely wrong. I see no error on my Safari 6.0.3. – Illuminate

Updated. I can reproduce it on more than one machine. Can you post a screenshot of how it looks in your Safari ? – Memberg

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>

Granite

I guess this is a reasonable fix. – Memberg

Well spotted Alshten I came across this issue myself when updating jquery so I have updated my answer with the solution I use now – Granite

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>

Vladamir

Answer 3

Try to give the column width inline but only on one row! For example:

<table>
<thead>
    <tr>
        <th class="one"   width="60">One</th>
        <th class="two">Two</th>
        <th class="three" width="90">Three</th>
        <th class="four"  width="90">Four</th>
        <th class="five"  width="90">Five</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="one">1</td>
        <td class="two">Text that could be too long for this column and it should be truncated.</td>
        <td class="three">3</td>
        <td class="four">4</td>
        <td class="five">5</td>
    </tr>
    <tr>
       ...
    </tr>
</tbody>

Here's a demo.

In my safari 5.1.7 (7534.57.2) your code is working just fine... and mine too...

Squint

I think safari < 6 works fine, but from 6 and beyond it starts having problems – Memberg

Answer 4

If you want to set the width: auto; i.e. variable width, then consider yourself according to which row may set this. One row may be 100px, another may 300px of that column, then what row is important to do this? You obviously confuse about this. Like the browsers confuse to which row should be applied width: auto;. Some browsers set this according to its heading and some according to its row contents. So you must set the width to behave the same in any browser.

You need to declare the width of column so it would be fixed in any browser. So I have just added width: 60px; in your .two selector.

See This Fiddle

Note: If it is only the problem in safari then add width: inherit; to your .two selector. It works fine.

Parham

The problem is not with the .two selector. It's with the fact that Safari ignores the box-sizing property, so the other cells are wider than they are supposed to. – Memberg

Answer 5

This should shed some light to the question. It seems that box-sizing doesn't work anymore in Safari 6 when used in table cells.

Sprocket

Can you add some code to your answer? Generally we like answers on the site to be able to stand on their own - Links are great, but if that link ever breaks the answer should have enough information to still be helpful. Please consider editing your answer to include more detail. See the FAQ for more info. – Cohe

The link is broken. That's why you need to post code in your answer. – Rattlebrain