2017-04-04 3 views
0

私はテーブルのデータをajaxでアップロードします。私が応答を受け取ったときに、データがテーブルに書き込まれ、それが画面に表示されます。データに小さなテキストの例が含まれていればOKです。しかし、フルテキストを含む40レコードのファイルをアップロードすると、画面の幅が数倍に増え、scroll-xは表示されますが、画面上にはテーブルや巨大な空きスペースがあります。大きなデータを持つテーブルはスクロールxを追加し、ページの幅を変更します

enter image description here

私は、テーブル内のすべてのテキストとデータをチェックしました。すべてがテーブルの中にあります。誰かが何が問題の原因になるのか知っていますか?

プロパティを追加すると修正できます。overflow-x:hidden;私のdivのラップテーブルに。しかし、本当に悪いこのソリューション) それはChromeとモジラで同じように動作します

<div id="trainData" style="display: none" class="my-table"> 
    <table class="table table-striped" id="trainTable"> 
     <thead class="thead-inverse-blue"> 
      <th class="inputText" >Input</th> 
      <th data-field="comment" >Comment</th> 
     </thead> 
    </table> 
</div> 

.table{ 
margin-top: 10px; 
table-layout: fixed; 
width: 100%; 
margin-bottom: 0 !important; 
border-bottom: 1px solid #dddddd; 
border-collapse: collapse !important; 
border-radius: 1px; 
} 
.table > tbody > tr > td { 
width: 1px; 
white-space: pre-wrap; 
word-wrap: break-word; 
} 
.fresh-table .table > tbody > tr > td >content{ 
    text-overflow:ellipsis; 
    overflow:hidden; 
} 

答えて

0

は、問題は、ホワイトスペースを追加することを決定していた:事前ラップ;プロパティ。それはスクロールと巨大な幅が発生します。 に変更されました。white-space:pre-line;と問題がありません:)

関連する問題