天天看點

div滾動條

一般滾動條都是根據高度或者寬度來判斷滾動

y滾動條

div滾動條

<div id="wrap" style="width:1076px; height:460px; overflow-y:scroll;">  

<table class="tableborder" width="100%" style="float:left">  

</div>  

根據資料條數的div滾動條

1.如果表格記錄小于14,就不滾動,此時不用div就沒有長寬的固定限制。

2.如果大于14就滾動,用div滾動

div滾動條

<div style="overflow:auto; height:400px; border-bottom:1px solid #999999">      

<table border="0" width="100%" cellspacing="0" cellpadding="0" class="list" id="tab1">  

<tr class="tableheader">  

<td width="100"></td>  

</tr>  

</table>  

x軸滾動條

表格水準滾動條滾動時怎樣控制表頭/操作不滾動,讓資料滾動

思路:設定水準滾動條的寬度<該滾動表格的寬度。

2:設定表格的行的高度style="height:30"。注意隻有表格的所有列寬(<td width="40px">)<該滾動表格的寬度時固定的高度才有效。否則失效。

div滾動條

<table  width="100%" border="0" cellspacing="0" cellpadding="0">  

<tr><td>  

<div style='position:relative;overflow:scroll; width:600;overflow-y:hidden'>  

<table width='850' border="0" cellspacing="0" cellpadding="0" class="list">  

      <tr  class="tableheader" style="height:15">  

       <td width="40px">序号</td>  

       <td width="90px"">申請時間</td>  

       <td width="120px">申請公司</td>  

       <td width="70px">聯系人</td>  

       <td width="100px">服務名稱</b></td>  

       <td width="90px">關務港口</td>  

       <td width="100px">客戶名稱</td>  

       <td width="100px">客戶編碼</td>  

      </tr>  

<?php  

$tpl_comm_array=$form->commission_array;  

foreach($tpl_comm_array as $key => $value){  

?>  

    <tr class="listcontent" onmouseover="this.bgcolor='#eff4fc'" onmouseout="this.bgcolor='#ffffff'" style="height:30">  

       <td><b><?php echo $tpl_comm_array[$key]['id']; ?></b></td>  

       <td><?php echo $tpl_comm_array[$key]['commdate']; ?></td>  

       <td><?php echo $tpl_comm_array[$key]['copname']; ?></td>  

       <td><?php echo $tpl_comm_array[$key]['contact']; ?></td>  

       <td><?php echo $tpl_comm_array[$key]['servname']; ?></td>  

       <td><?php echo $tpl_comm_array[$key]['portname']; ?></td>  

       <td><?php echo $tpl_comm_array[$key]['custname']; ?></td>  

       <td><?php echo $tpl_comm_array[$key]['custcode']; ?></td>  

<?php } ?>   

</td>  

<td>  

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="list">  

<tr  class="tableheader" style="height:15">  

       <td width="100px">操作</td>  

      <tr class="listcontent" onmouseover="this.bgcolor='#eff4fc'" onmouseout="this.bgcolor='#ffffff'" style="height:30">  

       <td align="center"><span class="ysmbotton"><a href="/main.php?do=adminorder&submit=update&order_application=<?php echo $tpl_comm_array[$key]['commid']; ?>">  

       簽約訂單</a></span></td><td style="padding-right:10px;">  

       <span class="bluesmbotton">  

       <a href="/main.php?do=orderdisplay&order_application=<?php echo $tpl_comm_array[$key]['commid']; ?>" target="_blank">  

       檢視詳情</a></span></td>  

<br>  

縱向

div滾動條

<div style="overflow:auto; height:400px; border-bottom:1px solid #999999;">  

<div style="width:260px;height:120px; overflow-y:scroll; border:1px solid;">  

<div style="width:798px;overflow:scroll;"> 橫向

<div style="width:260px;height:120px; overflow:scroll; border:1px solid;">雙向

讓豎條消失:

<body style='overflow:scroll;overflow-y:hidden'></body>

讓橫條消失:

<body style='overflow:scroll;overflow-x:hidden'></body>