How to remove page-level horizontal scroll caused by wide Bootstrap responsive tables?

PHPMaker General Discussion (PHPMaker)
1

Hi everyone,

I’m using Bootstrap’s responsive tables (table-responsive class) to handle large tables with many columns. While the table’s internal scrollbar works as expected, it also triggers an unwanted horizontal scrollbar at the page level when scrolling to the right.

Problem:

  • Table scrollbar (:heavy_check_mark: intentional, due to table-responsive).
  • Page scrollbar (:x: unwanted, appears only when scrolling the table to the extreme right).

Goal:
Remove the page-level scrollbar without disabling the table’s responsiveness.

image
image815×365 17.5 KB

When scroll all way right, this happend

image
image637×541 3.84 KB

2

You may disable the advanced setting Use Bootstrap responsive table.

3

Mmmm no, I don’t want to disabe that setting

There’s another way to fix this?

4

Then you can only add your own JavaScript to adjust HTML element width on resize.