CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Marco Costa
Marco Costa

Reputation: 37

Bootstrap table in div horizontal scroll not work

In the content, I put a div with a table inside. I need it to scroll horizontally. I've spent hours researching and trying some solutions.

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

safari test

chrome test

div 1500 px

Upvotes: 2

Views: 15090

Answers (2)

firfor
firfor

Reputation: 169

at first.you should add class name 'table-responsive' to the div element which is the container element of the table.

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

second. if you want the effect that all content in the table display only on one line without soft wrap.you should add css style to your style sheet with content as below:

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

}

Upvotes: 3

Varun
Varun

Reputation: 1946

Since you are using bootstrap,instead of using styles use the inbuilt classes.

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

This will give you a horizontal scrollbar.

Upvotes: 6

Related Questions