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 に答える