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>

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>

• javascript
• jquery
• html
• css
• twitter-bootstrap

• You just want to be able to scroll horizontally when the table is wide, ride? Because your code already does that for me. Or am I misunderstanding your question? – SamuelMS Commented Jun 14, 2015 at 5:58
• It seems to work for me -- jsfiddle/0k9a2h10 -- what problem are you having? If on OS X, know that the default behavior is to not show scrollbars. So you won't see them unless you toggle that setting or add fake scrollbars. With a touchpad, the JSFiddle I linked to scrolls horizontally. – Cymen Commented Jun 14, 2015 at 5:58
• does not work here, what could be wrong? – Marco Costa Commented Jun 14, 2015 at 15:30

2 Answers 2

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.

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;

}