How to Remove The Horizontal Scrollbar in a Div

How to remove Horizontal scroll-bar?

try this

body {
  overflow-x: hidden;
  max-width: 100%;
}

Delete horizontal scrollbar

The horizontal scrollbar appears because your content is too wide for screen. Check with the width's of your elements.
A quicker solution is to just limit your body's width and scrollbar would be gone.

body { width: 98% } works alright in your case. You can also use body { overflow-x : hidden} and just hide the scrollbar if you're sure you don't have content that needs to be accessed by scrolling horizontally.

How to remove horizontal scrollbar when using no padding

Probably you've implemented your grid incorrectly. Avoid to add additional styles to bootstrap classes and use .row when needed. When you need custom styles use wrappers inside .container, .row and .col so you can manage them without altering bootstrap behavior.

In your case, I would remove the class row from the parent div of p-0, then remove the class col-md-12 from p-0, setting the p-0 width to 100% and removing the properties padding:0px. Anyway, I think you've additional issues in your nested elements so good lectures for you are:

• How the Bootstrap 4 Grid Works
• How Box model works

How do I remove the horizontal scroll bar from my Navbar

Add overflow-x: hidden; to the style= attribute of your navbar.

How to remove this horizontal scrollbar in Bootstrap 3

As per Bootstrap 3 documentation:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

Therefore, add the class container to your .wrapper element.

Updated Example

<div class="wrapper container">
    <div class="row">
        ...
    </div>
</div>

As for an explanation, the .row class has -15px margins on each side.

.row {
    margin-right: -15px;
    margin-left: -15px;
}

The .container class effectively displaces that with the following:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

In addition to reading the Bootstrap 3 docs, I'd suggest reading the article "The Subtle Magic Behind Why the Bootstrap 3 Grid Works".

Remove horizontal scroll bar in CSS

The scrollbar appears because the content is too wide for your screen.

Just omit the width on the div element, it will auto-expand to 100% of it's parent. Floating the facebook button to the right like you already did should then align the button correctly without scrollbar.

If you don't get a satisfying solution you can still declare overflow:hidden on the containing div to supress the scrollbars.

This would be the result: http://jsfiddle.net/poikl/u4kMs/8/

Remove horizontal scroll bar and make table wider

Update

As of Tabulator v4.7 there is a built in layout mode for handling this. the fitDataTable layout mode will fit the width table to its contents:

var table = new Tabulator("#example-table", {
    layout:"fitDataTable",
});

See the Layout Documentation for full details and a working example

Original Answer

There is no built in feature for allowing external scrolling of the table. The table is based in a div and so will take up 100% the width of its parent element.

It will then either handle scrolling inside the table or resize the columns to fit depending on how your table is configured.

You could make some CSS tweaks to allow this form of display but it may cause the table to malfunction under certain circumstance, depending on your configuration.

You would need to include the following CSS after the tabulator style sheet has been included:

.tabulator, .tabulator-header, .tabulator-tableHolder{
    overflow:visible !important;
}

But essentially at that point you may be better off just using a standard HTML table as you seem to be disabling a lot of the features that you would use Tabulator for.

---

Related Topics