div水平滚动中的bootstrap表不起作用

Question

在内容中，我把一个带有桌子的div放在里面。我需要它水平滚动。我花了几个小时研究并尝试了一些解决方案。

<div style="width:100%; overflow: scroll;">
    <table style="width:2000px;">
            <tr>
                <td>very large width table with scroll horizontal</td>
                <td>x</td>
                <td>x</td>
                <td>x</td>
            </tr>
    </table>
</div>

Answer 1

由于您使用的是bootstrap，而不是使用样式，请使用内置类。

<div class="table table-responsive">
   <table >  //give width styling as you want.
        <tr>
            <td>very large width table with scroll horizontal</td>
            <td>x</td>
            <td>x</td>
            <td>x</td>
        </tr>
   </table>
</div>

这将为您提供水平滚动条。

Answer 2

起初。你应该添加课程名称＆＃39; table-responsive＆＃39;到div元素，它是表的容器元素。

<div class="table-responsive">
  <table class="table table-bordered table-hover table-condensed small">
  /* table content here */
  </table>
</div>

秒。如果你想要的效果是表格中的所有内容只显示在一行而没有软包装。你应该在样式表中添加css样式，内容如下：

th,td{
    /*use this property to disbale soft wrap*/
    white-space: nowrap;
    /*To make extra certain,add this css property*/
    word-break: keep-all;

}