Table 大数据添加 scroll-x 和改变页面宽度

Question

我使用 ajax 在 table 中上传数据。所以当我收到回复时 - 数据将填充到 table 并且它将在屏幕上可见。当数据包含一些小文本示例时，它看起来不错。但是如果我上传包含 40 条包含全文的记录的文件，那么屏幕宽度会增加几次，scroll-x 会可见，但它看起来像 table 并且屏幕上有巨大的空白 space。

我检查了 table 中的所有文本和数据。一切都在 table 里面。有人知道问题的原因是什么吗？

如果添加属性 overflow-x: hidden; 我可以解决这个问题在我的 div 上包裹着 table。但这个解决方案真的很糟糕）它在 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;
}

Answer 1

问题出在决定添加白色-space: pre-wrap; 属性。它发生滚动和巨大的宽度。更改为 white-space: pre-line; 并且遗漏了问题 :)

Table 大数据添加 scroll-x 和改变页面宽度

Table with big data add scroll-x and change width of page

html

css

scroll

html-table

horizontal-scrolling