滾動條樣式的設定（ipad也好用）
阿新 • • 發佈：2019-02-11
我採用了兩個table的方式，就是將表頭放進一個table中，將表體放入一個table中，這樣就可以靈活的操縱滾動條了
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.Box{ overflow:hidden;}
.tableBox{ height:200px; width:200px; position:relative; overflow-x:auto; overflow-y:hidden;table-layout:fixed; }
.tablehead{ position:absolute; width:300px; left:0;}
.tablebody{ position:absolute; width:300px; height:200px; overflow-y:auto; overflow-x:hidden; top:20px; left:0;}
td{ width:88px;white-space:normal;}
table{border-collapse: collapse; border-spacing: 0;margin-left: 5px;margin-right: 5px;table-layout:fixed;}
</style>
</head>
<body>
<div class="Box">
<div class="tableBox" >
<div class="tablehead">
<table class="head" border="1px">
<tr>
<td>姓名</td><td>性別</td><td>年齡</td>
</tr>
</table>
</div>
<div class="tablebody">
<table class="body" border="1px" >
<tr><td>小明的地地道道的地地道道的</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
</table>
</div>
</div>
</div>
</body>
</html>
其中有有三個div，最外側一個，控制全域性，一個控制表頭，一個控制表身。有以下幾點注意：
1.最外側的div，需要用overflow-x來控制最橫向滾動，因為overflow-x、y在IE中存在相容性問題，當overflow-x/overflow-y其中之一被設定成'scroll'、'auto'、'hidden'時，另一個還是'visible'，不會被設定為'auto' 所以，最好使用 "overflow-x:scroll; overflow-y:auto",這時候，右邊的在需要時才會顯示。如果希望右邊的滾動條一直不顯示，那麼，可以使用："overflow-x:scroll; overflow-y:hidden;"
2.表頭和表體的各列需要對齊，所以可以用table-layout:fixed;來固定寬度
3.當用table-layout:fixed;固定了列寬度，也就會有長的內容會顯示不全，那麼可以用white-space:normal;來進行換行
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.Box{ overflow:hidden;}
.tableBox{ height:200px; width:200px; position:relative; overflow-x:auto; overflow-y:hidden;table-layout:fixed; }
.tablehead{ position:absolute; width:300px; left:0;}
.tablebody{ position:absolute; width:300px; height:200px; overflow-y:auto; overflow-x:hidden; top:20px; left:0;}
td{ width:88px;white-space:normal;}
table{border-collapse: collapse; border-spacing: 0;margin-left: 5px;margin-right: 5px;table-layout:fixed;}
</style>
</head>
<body>
<div class="Box">
<div class="tableBox" >
<div class="tablehead">
<table class="head" border="1px">
<tr>
<td>姓名</td><td>性別</td><td>年齡</td>
</tr>
</table>
</div>
<div class="tablebody">
<table class="body" border="1px" >
<tr><td>小明的地地道道的地地道道的</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
</table>
</div>
</div>
</div>
</body>
</html>
其中有有三個div，最外側一個，控制全域性，一個控制表頭，一個控制表身。有以下幾點注意：
1.最外側的div，需要用overflow-x來控制最橫向滾動，因為overflow-x、y在IE中存在相容性問題，當overflow-x/overflow-y其中之一被設定成'scroll'、'auto'、'hidden'時，另一個還是'visible'，不會被設定為'auto' 所以，最好使用 "overflow-x:scroll; overflow-y:auto",這時候，右邊的在需要時才會顯示。如果希望右邊的滾動條一直不顯示，那麼，可以使用："overflow-x:scroll; overflow-y:hidden;"
2.表頭和表體的各列需要對齊，所以可以用table-layout:fixed;來固定寬度
3.當用table-layout:fixed;固定了列寬度，也就會有長的內容會顯示不全，那麼可以用white-space:normal;來進行換行