CSS：サファリのセルの「テーブルレイアウト：固定」と枠のサイズ変更

Question

私は単純なテーブルを持ち、ヘッダとテーブル本体を持っています。すべてのセルは固定幅であると想定され、1つだけが可変（例えば、名前）である。

text-overflow: ellipsisを可変幅セルに使用するには、table-layout: fixedが必要です。

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

チェックHTML, along with a demo：

はここで、テーブルのCSSです。

私はこのテーブルをすべてのブラウザで同じように動作させようとしていますが、Safariではボックスサイズ：border-boxは無視されているようです。 this answerによれば、以前のバージョンのSafariのバグに対する修正であるはずです。ここで

は、それがChromeでどのように見えるかです：

そして、どのようにそれはSafariの6.0.3になります。

この問題は、私がテストしたことをMac用のすべての新しいSafariでも存在しています。一週間前にSafariで古いものと新しいものをテストしたところ、それはうまくいきました。それはどういうわけか新しいSafariが突然新しい種類のバグを持っているようなものです。

私はSafariバージョン6.0.3（7536.28.10）を使用しています。古いSafariバージョン5.0.5（6533.21.1、6533.21）は正常に動作しているようです。

人、怒って行く前に手伝ってください！私はここで何か間違っているのですか、本当にバグでしょうか？

Answer 1

より良いアプローチは、完全にテーブルを削除し、CSSを使用することですが、それが不可能な場合、私は唯一のサファリ

jqueryのコード

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

に影響を与え、テーブルのためにいくつかのブラウザ固有のCSSをしようとお勧めしたいです

して、あなたのCSSの

.saf table 
{ 
// any adjustments required 
} 

このアプローチを使用した場合、私は、少なくともテーブルの上にIDをお勧めしたいが。私はStackOverflowの上でそれを見つけたように私は、このアプローチのために信用を主張カントが、その私が使用して私が唯一で指摘したように

更新

ちょうど、誰もがこのエラー時につまずく包むいくつかのブラウザ固有のハックを必要とするとき$の.browser以下のコメントは、jQueryのバージョン1.9で削除されましたので、代わりにあなたがwidth: auto;すなわち可変幅を設定したい場合は、その後に応じて自分で考えるmodernizr.jsを使用して

以下

<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

ちょうどあなたが使用することができます 、これを試してみてください：

<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

は、列幅をインラインで与えるようにしてください一つだけの行に！たとえば：

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

はここdemoです。私のSafariで

5.1.7（7534.57.2）あなたのコードがうまく働いている...と私はあまりにも...

Answer 4

Thisが質問にいくつかの光を当てる必要があります。テーブルセルで使用すると、Safari 6ではbox-sizingが動作しなくなっているようです。

Answer 5

のようなコードを使用することですどちらの行でこれを設定するかもしれません。 1行は100ピクセル、もう1行は300ピクセルの列になることができますあなたは明らかにこれについて混乱させます。ブラウザーと同じように、行を適用する必要があります。width: auto;。一部のブラウザでは、見出しに応じて設定したり、行の内容に応じて設定したりするブラウザもあります。したがって、どのブラウザーでも同じように動作するように幅を設定する必要があります。

どのブラウザでも修正されるように、列の幅を宣言する必要があります。あなたの.twoセレクタにwidth: 60px;を追加しました。それはSafariで唯一の問題であれば、あなたの.twoセレクタにwidth: inherit;を追加：

はThis Fiddle

注を参照してください。それはうまく動作します。