CSS解決表格或圖片內容將頁面撐開的辦法

　　在製作頁面，添加資料的時候，可能會遇到這種情況，客戶提供的表格式資料太寬，把頁面撐開了，我也遇到這樣的問題，當我盡量給表格減肥，發現還是不行的時候，偶忽然想到了overflow:auto，這個屬性。
　　在這個大的資料表格外面套一個div，class是box，頁面源碼

代碼如下	複製代碼
<div class="box"> <table> ...... </table> </div>

css這樣寫

代碼如下	複製代碼
.box{width:520px; overflow:auto;}

　　css定義了這個div的overflow“auto”的屬性，還有就是要給這個div一個適合這個頁面的寬度。
　　這樣，當“box”裡面的內容寬度大於css定義的寬度時，就會出現捲軸了。裡面的內容可以是表格，也可以是圖片等等。
　　在上上面overflow:auto的問題中，為了不讓內容撐開，我用了

代碼如下	複製代碼
.box{width:520px; overflow:auto;}

　　但是這樣會出現一個問題，就是橫向和豎直捲軸都會出現，因為如果只定義了overflow，豎直捲軸會因為橫向捲軸佔用的空間而一直出現，後來為了隱藏豎直的捲軸，我這樣寫

代碼如下	複製代碼
.box{width:520px; overflow:auto;overfolw-y:hidden;}

　　隱藏了豎直捲軸，問題雖然解決了，但是換個角度去想，為什麼是讓它出現了再隱藏，而不是不讓它出現。查過了蘇沈小雨-樣式表中文手冊以後發現只要定義overfolw-x的屬性就可以了。

代碼如下	複製代碼
.box{width:520px; overfolw-x:auto;}

　　如果不超過所定寬度，不顯示捲軸，超過了寬度只顯示橫向捲軸，因為沒有對豎直滾動overfolw-y定義，所以豎直捲軸也沒有出現。
　　文法：
overflow-x: visible | auto | hidden | scroll
 
參數：
visible: 不剪下內容也不添加捲軸。假如顯式聲明此預設值，對象將被剪下為包含對象的window或frame的寬度。
auto: 此為body對象和textarea的預設值。在需要時剪下內容並添加捲軸
hidden: 不顯示超過對象寬度的內容
scroll: 總是顯示橫向捲軸
　　overfolw-y與上面overflow-x相似，想要固定垂直高度，出現垂直捲軸的話，只要定義高度和overfolw-y的屬性就可以了。