在制作頁面，添加資料的時候，可能會遇到這種情況，客戶提供的表格數據太寬，把頁面撐開了，我也遇到這樣的問題，當我盡量給表格減肥，發現還是不行的時候，偶忽然想到了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的屬性就可以了。