需要瀏覽器中的水平滾動並截斷底部的BLANK空間

我在表中有這個下拉列表。下拉列表是一個很長（90個字符）的 1個項目。其他人短得多。需要瀏覽器中的水平滾動並截斷底部的BLANK空間

這是一個生成的頁面，所以會有比列出的更多的記錄。我能夠刪除頁面底部的空白處，但是我丟失了瀏覽器上的水平滾動條。我想在瀏覽器中滾動以查看錶格的右側。

如何刪除表格下方的空白並在瀏覽器上保持水平滾動？
如何在瀏覽器上獲取水平滾動條，而不是表格？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<html Lang="en"> 
<head> 

<title>test_Scroll</title> 

<style type="text/css"> 
#wrappergo { background:#ffffff;} 
.main_clearr{ 
    clear:both; 
} 
table.myview{ 
    width:96%; 
    margin: 0px auto; 
    border-collapse: collapse; 
    border-width:1px 1px 1px 1px; 
    overflow:visible; 
    overflow:auto; 

    border-color: #000; 
    border-style: solid; 
} 
table.myview td{ 
    margin:3px 2px 2px 4px; 
} 

td.tblnormal_1_4em 
{ 
    FONT-WEIGHT: normal; 
    FONT-SIZE: 1.4em; 
    COLOR: #000000; 
    font-family:'Rockwell',arial, verdana, sans-serif; 
    BACKGROUND-COLOR: #ffffff; 
} 
tr>th, tr>td { 
    text-align: center; 
    vertical-align:top; 
    font-family: Rockwell, Verdana, Arial, Helvetica, sans-serif; 
    color: #000000; 
    FONT-SIZE: 1.0em; 
} 
th+th, td+td { 
    text-align: left; 
    padding-left: 150px; 

} 
th+th+th, td+td+td { 
    padding-left: 0px; 
    text-align: right; 
} 

.cssdropdown{ 
    height:auto; 
    FONT-SIZE: 1em; 
    COLOR: #000000; 
    font-family:'Rockwell',arial, verdana, sans-serif; 
    BACKGROUND-COLOR: #ffffff; 
} 
.contentmain { 
padding:10px 20px 0px 20px; 
} 
#outerdiv {float:left; width:99%; background:#ffffff; 
padding-bottom:32767px; margin-bottom:-32767px; 
} 

</style> 

<!--[if lte IE 7]> 
<style type="text/css"> 
body {word-wrap:break-word;} 
#outerdiv {float:left; width:75.8%; background:#ffffff;} 

/* for IE6 */ 
* html #wrappersn {display:inline-block;} 
</style> 
<![endif]--> 
</head> 
<body bgcolor="#FFFFFF" text="#000000" link="#800000" vlink="#800000" alink="#800000" > 

<div class="main_clearr"></div> 
<div id="wrappergo"> 
<div id="outerdiv"> 
<div class="contentmain"> 
<form method="Post" name="form3" > 
<table class="myview" border="1" > 
<thead> 
<tr> 
    <th width="10%"> 
    Country</th> 
    <th width="15%" > 
    State</th> 
    <th width="20%" > 
    City</th> 
    <th width="50%" > 
    School&nbsp;&nbsp;</th></tr> 
</thead> 
<tbody> 
<tr><td colspan="4">The testing data</td></tr> 
<tr><td class="tblnormal_1_4em">USA</td><td class="tblnormal_1_4em">Pennsylvania_PN&nbsp;</td><td class="tblnormal_1_4em">Pittsburg</td> 
<td class="tblnormal_1_4em">&nbsp; 
<select name="ohighschool" class="cssdropdown"> 
<option value="0" SELECTED  >Select Lunch</option> 
<option value="2"> Healthy Lunch Deluxe Supreme (This will be the longest line in this dropdown 90 characters)</option> 
<option value="3"> Healthy Lunch Express</option> 
</select> 
</td></tr> 
</tbody> 
</table> 
</form> 

</div> <!-- end contentmain--> 

</div> <!-- end outerdiv--> 
</div><!-- #wrappersn --> 
</body> 
</html>

來源

2012-09-20 Steve42

如果我把\t #wrappergo { \t overflow：hidden;該頁面從32767px修剪。但是，我沒有水平滾動條。 – Steve42

如果內容不是瀏覽器窗口更寬，你會得到一個滾動條。這會自動發生。

你的表下沒有「空白」 - 這是未佔用的瀏覽器窗口的剩餘部分。

來源

2012-09-20 14:54:25

求解 - 我刪除了
padding-bottom：32767px;邊距：-32767px;
然後我在瀏覽器上沒有長垂直滾動的瀏覽器上進行水平滾動。不確定32767是幹什麼的。 – Steve42

需要瀏覽器中的水平滾動並截斷底部的BLANK空間

回答

相關問題