CSS solution table or picture content to open the page method

css| Solution | page

In the production page, add material, may encounter this situation, the customer provides the table data is too wide, the page is stretched, I also encountered such a problem, when I try to give the form to lose weight, found or not, I suddenly thought of the overflow:auto, this attribute.

Outside of this large data table sets a div,class is box, page source code

<div class= "box" >
<table>
......
</table>
</div>

CSS is written like this

. box{width:520px; Overflow:auto;}

CSS defines this div's overflow "auto" attribute, and is to give this div a suitable width for this page.

This way, when the content in box is wider than the width defined by the CSS, the scroll bar appears. The contents can be a table, can be a picture and so on.

In the above Overflow:auto problem, in order not to let the content open, I used the

. box{width:520px; Overflow:auto;}

But the problem is that both the horizontal and vertical scroll bars appear, because if you only define overflow, the vertical scroll bar will always appear because of the space occupied by the horizontal scroll bar, and then to hide the vertical scroll bar, I write

. box{width:520px; Overflow:auto;overfolw-y:hidden;}

Hide the vertical scroll bar, although the problem is solved, but to change the point of view, why let it appear and then hide, not let it appear. Checked the SU Shen Xiao-style sheet Chinese manual later found that just define the overfolw-x properties.

. box{width:520px; Overfolw-x:auto;}

If you do not exceed the width you set, the scroll bar is not displayed, and the width only displays the horizontal scroll bar because there is no definition of the vertical scrolling overfolw-y, so the vertical scroll bar does not appear.

Grammar:

Overflow-x: Visible | Auto | Hidden | Scroll

Parameters:
Visible: Do not cut content nor add scroll bars. If you explicitly declare this default value, the object will be clipped to the width of the window or frame that contains the object.
Auto: This is the default value for the body object and textarea. Cut content and add scroll bars when needed
Hidden: Do not display content that exceeds the width of the object
Scroll: Always show horizontal scroll bars

Overfolw-y is similar to the above overflow-x, you want to fix the vertical height, the vertical scroll bar appears, as long as the definition of height and overfolw-y properties.