如何使用react-bootstrap-table-next显示20+列

Question

我正在尝试使用react-bootstrap-table-next呈现具有20多个列的表。现在，我的数据正在渲染，但是有这么多的列，文本被压缩了。这样的表格是否有水平滚动选项或列标题分页？

谢谢！

Answer 1

如果表太宽，则可以尝试以下操作：

在表格周围添加一个容器元素，该容器元素带有一个设置为overflow-x:auto的自定义css类。必要时，这应该显示水平滚动条。例如：

HTML：

<div class="table-horiz-scroll" >
  <table>
    <tr><!-- row headers--></tr>
    <tr><!-- row 1 data--></tr>
    <tr><!-- row 2 data--></tr>
    <tr><!-- ... --></tr>
    <tr><!-- row n data--></tr>
  </table>
</div>

CSS：

 .table-horiz-scroll {
    overflow-x:auto;
 }

希望有帮助！