How to prevent the scroll bar from affecting the page width when the scroll bar appears on the page

How to prevent the scroll bar from affecting the page width when the scroll bar appears on the page
Set the width of the body to the width of the window (controlled by the following script)

$("body").css("width", $(window).width());

At the same time, set the overflow of the body (written in the style)

body{ overflow-x: hidden;}

ps:

Similarly, the table in div is also handled in this way




Set the width of tableContainer (written in the style) and tableMain (controlled by the script) to be equal to the width of tableMainHead


Copy code
The code is as follows:

$(".tableMain").css("width", $(".tableMainHead").css("width"));


Set the overflow of tableContainer to hidden (written in the style)

This has a disadvantage, that is, when the browser window size changes, the content in the body cannot be automatically centered (the div that originally used percentages for width settings could be automatically centered using margin: auto, but now that the extra part is hidden, it cannot be automatically centered)

<<:  Solution to the problem that the div width is set to width:100% and then the padding or margin exceeds the parent element

>>:  Share the pitfalls of MySQL's current_timestamp and their solutions

Recommend

WeChat applet implements waterfall flow paging scrolling loading

This article shares the specific code for WeChat ...

Example code for implementing card waterfall layout with css3 column

This article introduces the sample code of CSS3 c...

Several magical uses of JS ES6 spread operator

Table of contents 1. Add attributes 2. Merge mult...

mysql5.5 installation graphic tutorial under win7

MySQL installation is relatively simple, usually ...

Complete steps to install mysql5.7 on Mac (with pictures and text)

I recently used a Mac system and was preparing to...

Detailed explanation of docker command to backup linux system

tar backup system sudo tar cvpzf backup.tgz --exc...

How to use less in WeChat applet (optimal method)

Preface I am used to writing less/sass, but now I...

Implementation steps for Docker deployment of SpringBoot applications

Table of contents Preface Dockerfile What is a Do...

How to deploy your first application with Docker

In the previous article, you have installed Docke...

Tutorial on installing mysql5.7.36 database in Linux environment

Download address: https://dev.mysql.com/downloads...

How to analyze MySQL query performance

Table of contents Slow query basics: optimizing d...

Start a local Kubernetes environment using kind and Docker

introduce Have you ever spent a whole day trying ...