大数据表添加scroll-x并更改页面宽度

Posted 2023-03-06

【中文标题】大数据表添加scroll-x并更改页面宽度

【英文标题】：Table with big data add scroll-x and change width of page

【发布时间】：2017-08-29 06:32:45

【问题描述】：

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

我检查了表格中的所有文本和数据。一切都在桌子上。有人知道问题的原因是什么吗？

如果添加属性 overflow-x: hidden; 我可以解决这个问题在我的 div 包装表上。但这个解决方案真的很糟糕） 它在 Chrome 和 Mozilla 上的工作方式相同

<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;

【参考方案1】：

问题在于决定添加空格：pre-wrap;财产。它发生滚动和巨大的宽度。更改为 white-space: pre-line; 并遗漏了问题:)