1

テーブルのコンテンツが許可されたサイズよりも長い場合、残りは非表示になります。何らかの理由で、ブートストラップを使用すると、オーバーフローが隠されません

私のhtml

   <div id="wrapper">
        <table class="tabel_basisgegevens" border="5">
            <tr><td>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20</td></tr>
        </table>
    </div>

私のCSS

.tabel_basisgegevens{
    height:30px;
    width: 1170px;
    color:white;
    background:red;

}    
#wrapper {
    position:absolute; 
    border:1px; 
    border-color:blue;
    width: 200px;
    overflow: hidden;
}

ここに私のJSFIDDLEがあります

「外部リソース」からブートストラップを削除すると、正常に機能します。これを修正する方法はありますか？Chrome では正常に動作しますが、Firefox 22.0 では動作しません。

私のアラート（）は、1170であるテーブルの幅を警告しません。代わりに、divの幅を警告します。

4

2 に答える 2

3

width: 1170px;問題の原因は、Firefox がon the table を無視してwidth: 200px;on the wrapper を使用していることにあるようです。テーブルにa を追加するmin-width: 1170px;と問題は解決しますが、追加の詳細がない限り、これが受け入れられるかどうかはわかりません。

編集:実際には、<td>コンテンツを常に 1 行に制限する必要がある場合white-space: nowrapは、 forを使用でき、<td>適切に機能するはずです。MBP の FF22 でテスト済み。

編集 2: Bootstrap CSS ファイルを調べた後、次のことに気付きました。

table {
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
}

Bootstrap はmax-width: 100%on テーブルに を設定するため、テーブルの親要素の幅よりも大きい場合、ブラウザは設定した幅を無視します。したがって、 を削除するかmax-width、 を追加するmin-widthか、ブラウザに改行を使用しないことを明示的に伝えると、white-space: nowrapすべて問題が解決します。max-width不要な場合は、Bootstrap から削除することをお勧めします。

とにかく、これは、同じコンテンツが与えられたときに Firefox と Chrome の動作がなぜ異なるのかという疑問を残しています。これを調べているときに、この SO questionを見ました。これmax-widthは、Chrome によって無視されたように見える理由を説明しています。

テーブルのW3C仕様から：

視覚的なフォーマット モデルに関しては、テーブルはブロック レベル ('display: table' の場合) またはインライン レベル ('display: inline-table' の場合) の要素のように動作できます。

Chrome と FF のユーザー エージェント スタイルを確認すると、どちらもdisplay: table. 仕様に厳密に従うと、overflow: hidden両方のブラウザで失敗するはずです。この場合、Chrome は仕様をわずかに誤解しているように見えますが、FF は厳密に仕様に準拠しています。

于 2013-07-19T07:54:32.993 に答える
0

これを試して

overflow:hidden working

http://jsfiddle.net/RZQwb/9/

 #wrapper {position:absolute; 
           border:1px solid blue;  
          width:200px;
          overflow:hidden;
    }
于 2013-07-19T07:41:14.103 に答える