以引导形式修复数据表答案

【问题标题】：fixing datatables on boostrap form以引导形式修复数据表
【发布时间】：2018-02-26 16:19:18
【问题描述】：

我有一个包含很多列的表，我正在使用 jquery-datatables。我希望这张桌子能放在他的容器上，但桌子越过了它！我正在使用引导表响应，如您所见，表的底部有一个滚动条！

<div class="table-responsive"></div>

调整页面大小时它也不会变小！谁能帮帮我？？

这是我的笨蛋： https://plnkr.co/edit/5LsDrsRPexXHpsWoSRFr?p=preview

【问题讨论】：

它没有克服它，而是得到一个滚动条，这是响应式表格的预期行为。
我不想有那个滚动条，让一切都合适，你认为有可能吗？？非常感谢！
有这么多字段，是也不是。这是可能的，但没有用，因为内容将不可见。所以我不建议这样做。如果您仍然想要，您可以将我认为的列宽限制为特定大小，以便所有这些列都适合。
问题是当我为一列设置宽度时，浏览器根本没有考虑我的新宽度，实际上尺寸没有改变！

标签： html css twitter-bootstrap-3 datatables

【解决方案1】：

只需使用表格宽度 100% css。它将使滚动能够与固定容器。

<div class="table-responsive">
   <table class="table table-bordered table-striped table-condensed flip-content" id="topPerformerTable" width="100%">
      <thead style="background:#C0C0C0;">
         <tr>
            <th style="padding-left: 15px;"> Id </th>
            <th> Product Name </th>
            <th> Total Events </th>
            <th> Total Revenue </th>
            <th> Rental Time </th>
         </tr>
      </thead>
      <tbody>
      </tbody>
   </table>
</div>

【讨论】：

我试过了，但由于某种原因，桌子上的宽度属性被忽略了：/