2017-04-04 43 views
0

我使用ajax上載表中的數據。所以當我收到回覆時 - 數據將填充到表格中,並且會在屏幕上顯示。當數據包含一些小文本示例時,它看起來沒問題。但是如果我上傳包含全文的40條記錄的文件,那麼屏幕的寬度會增加幾次,scroll-x會變得可見,但它看起來像桌子和屏幕上的巨大空白區域。大數據表添加scroll-x和更改頁面的寬度

enter image description here

我已經籤表中的所有文本和數據。一切都在桌子裏面。有人知道可能是什麼原因的問題?

我可以解決這個問題,如果添加屬性overflow-x:hidden;在我的div包裝表。但這種解決方案非常糟糕) 它適用於Chrome和Mozila相同

<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

的問題是在決定增加空白:預包裝;屬性。它發生滾動和巨大的寬度。更改爲白色空間:預行;和錯過的問題:)