CSS: 'table-layout: fixed' i border-box rozmiaru komórek w Safari

Question

Mam prostą tabelę z nagłówkiem i ciałem tabeli. Wszystkie komórki mają mieć ustaloną szerokość, tylko jedna jest zmienna (np. Nazwa).

Potrzebuję table-layout: fixed, aby użyć text-overflow: ellipsis na komórkach o zmiennej szerokości.

Oto CSS do tabeli:

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; 
} 

Sprawdź HTML, along with a demo.

Staram się, aby ta tabela zachowywała się tak samo we wszystkich przeglądarkach, ale wygląda na to, że box-sizing: border-box jest ignorowany w Safari. Chociaż zgodnie z this answer, powinna to być poprawka do błędu w starszych wersjach Safari.

Oto jak to wygląda w Chrome:

A jak to wygląda w przeglądarce Safari 6.0.3:

Ten problem występuje również we wszystkich nowszych Safari dla Mac że testowane. Jestem prawie pewien, że testowałem go tydzień temu w Safari, zarówno stare, jak i nowe i działało dobrze. Wygląda to tak, jakby nowy Safari nagle miał nowy rodzaj błędu.

Używam Safari w wersji 6.0.3 (7536.28.10). Stara wersja Safari 5.0.5 (6533.21.1, 6533.21) działa dobrze.

Ludzie, pomóżcie mi, zanim zwariuję! Czy robię coś złego tutaj, czy jest to naprawdę błąd?

Answer 1

Lepszym rozwiązaniem byłoby usunięcie tabeli całkowicie i użyć CSS, ale jeśli nie jest to możliwe Sugerowałbym próbuje jakąś konkretną css przeglądarki dla tabeli, która dotyczy tylko safari

kod jQuery

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

a następnie w css

.saf table 
{ 
// any adjustments required 
} 

choć w przypadku korzystania z tej metody Sugeruję id na stole przynajmniej.Nie mogę twierdzą, kredyt dla takiego podejścia jak znalazłem go na StackOverflow ale jej używam, kiedy wymagają jedynie kilku Browser konkretnych hacki

aktualizacji

Wystarczy obudować ktoś natknie się na ten błąd, jak wskazano w komentarz poniżej $ .browser został usunięty w wersji 1.9 jQuery więc alternatywą jest użycie modernizr.js i użyć kodu jak poniżej

<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

Wystarczy spróbować tego, można użyć:

<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> 

Answer 3

spróbować dać inline szerokość kolumny, ale tylko w jednym rzędzie! Na przykład:

<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> 

Oto demo.

W moim Safari 5.1.7 (7534.57.2) Twój kod działa dobrze ... i mój też ...

Answer 4

This powinny rzucić nieco światła na to pytanie. Wygląda na to, że box-sizing nie działa już w Safari 6, gdy jest używany w komórkach tabeli.

Answer 5

Jeśli chcesz ustawić width: auto; czyli szerokość zmienną, a następnie rozważyć sobie według który wiersz może ustawić to. Jeden wiersz może być 100px, inny może 300px tej kolumny, a następnie, który wiersz jest ważny, aby to zrobić? Oczywiście mylicie o tym. Podobnie jak przeglądarki dezorientują do którego wiersza należy zastosować width: auto;. Niektóre przeglądarki ustawiają to zgodnie z nagłówkiem, a niektóre według zawartości wiersza. Dlatego musisz ustawić szerokość, aby zachowywała się tak samo w dowolnej przeglądarce.

Należy zadeklarować szerokość kolumny, aby była ona ustawiona w dowolnej przeglądarce. Właśnie dodałem width: 60px; w selektorze .two.

Zobacz This Fiddle

Uwaga: Jeśli jest to tylko problem w safari następnie dodać width: inherit; do selektora .two. To działa dobrze.