2016-10-10 6 views
-1

私の問題は、1列のテキスト・オーバーフローを追加するとき、私はこれは結果なしで他の列テキストオーバーフロー

<table id="table" data-show-header="false" > 
<thead> 
    <tr> 
    <th data-field="state" data-checkbox="true" data-formatter="check"></th> 
      <th data-field="fav" data-formatter="formatoFav" ></th> 
      <th data-field="nombre" class="col-md-2"></th> 
      <th data-field="asunto" class="col-md-10 abbreviation"></th> 
      <th data-field="hora" data-formatter="formatoHora" data-align="right"></th> 
    </tr> 
</thead> 

のすべての書式を失うということですCSSでCSS

enter image description here

そしてこの

enter image description here

.table { 
    table-layout:fixed; 
} 

.table td.abbreviation{ 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    } 
+0

デモを作成できますか? –

答えて

2

オーバーフローuはオーバーフロー資料で見ることができるヨーヨーとして正しく機能するために一定の幅(又は必要に応じて高さ)を必要とします。オーバーフローさせたいdivの幅と高さを設定しないと、親要素のオーバーフロー時に隠れてしまいます(これにより問題が発生します)。

EDITED:

div.foo{background:#000; width:250px;} 
 
div.foc{width:200px; border:1px solid white;} 
 
div.fo1{overflow:hidden; background:#A44;} 
 
div.fo2{width:100px; height:100px; overflow:hidden; color:#FFF;}
<div class="foo"> 
 
    <div class="foc"> 
 
<div class="fo1"> 
 
    <span>lalalalaauoshdoajhsdaodshdaojshdaosdhaosldhaoshdasdhaslkdnalsjdnljdalfblaskdfblsakdfbalkfbakldsbfkladsfblkadfbkladfbakldfbakldsbfaksbfkasfbalkdfbksdbfksadjbfkjadsbfkldfblaksdbfkladsbfkladsfbakdsfbdskjbfkbadskfbasldkfbjsadklfbakjdsbfjksad</span> 
 
</div> 
 
<div class="fo2"> 
 
    <span> auoshdoajhsdaodshdaojshdaosdhaosldhaoshdasdhaslkdnalsjdnljdalfblaskdfblsakdfbalkfbakldsbfkladsfblkadfbkladfbakldfbakldsbfaksbfkasfbalkdfbksdbfksadjbfkjadsbfkldfblaksdbfkladsbfkladsfbakdsfbdskjbfkbadskfbasldkfbjsadklfbakjdsbfjksad 
 
    </span> 
 
    
 
</div> 
 
</div> 
 
    </div>

幅を削除してください:div.focの200pxの、何happer見るより良い例

以下の例は、参照を投稿するに従って。

希望すると、 乾杯! =)

関連する問題