0

我在表格中有这个下拉列表。下拉列表是 1 项的长列表（90 个字符）。其他的要短得多。

这是一个生成的页面，因此将有比列出的记录更多的记录。我能够删除页面底部的空白，但是我丢失了浏览器上的水平滚动。我想在浏览器中滚动以查看表格的右侧。

  1. 如何删除表格下方的空白并保持浏览器上的水平滚动？
  2. 如何在浏览器而不是表格上获得水平滚动？
<!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>
4

1 回答 1

0

如果内容比浏览器窗口宽，您会看到一个滚动条。这是自动发生的。

你的桌子下面没有“空白”——那只是未被占用的浏览器窗口的剩余部分。

于 2012-09-20T14:54:25.040 回答