DIV+ul+LI实现表格效果以及div带滑动条

写这个是为了给自己一个好好的笔记，以免下次需要的时候又到处找，费神费事费时费力。开始吧！

1.先看看效果

2.网页代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head>
 6 <title>divtest</title>
 7 <style>
 8 #t {
 9 width: 404px;
10 margin: 5px auto;
11 padding:0px;
12 border-top: #0066cc 1px solid;
13 border-left: #0066cc 1px solid;
14 display:table;
15 }
16 #t li {
17 float: left;
18 width: 100px;
19 height: 50px;
20 list-style-type: none;
21 border-right:#0066cc 1px solid;
22 border-bottom: #0066cc 1px solid;
23 text-align: center;
24 line-height: 50px;
25 }
26 </style>
27 </head>
28 
29 <body>
30    
31    <div style="overflow:scroll; height:100px; width:200px">
32     <ul>
33     <li>dddddd</li>
34     <li>dddddd</li>
35     <li>dddddd</li>
36     <li>dddddd</li>
37     <li>dddddd</li>
38     <li>dddddd</li>
39     <li>dddddd</li>
40     <li>dddddd</li>
41     <li>dddddd</li>
42     <li>dddddd</li>
43     <li>dddddd</li>
44     <li>dddddd</li>
45     <li>dddddd</li>
46     <li>dddddd</li>
47     <li>dddddd</li> 
48     <li>dddddd</li>
49     <li>dddddd</li>       
50     </ul>
51    </div>
52    <ul id="t">
53 <li style="width:403px;">helloworld</li>
54 <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li>
55 </ul>
56 
57 </body>
58 </html>

div 滑动条

overflow:scroll 和overflow:auto;/*自动出现滚动条，如果要出现竖直滚动条则改成：overflow-y:auto，如果横向出现滚动条则改成：overflow-x:auto*/

scrollbar-face-color:#F00;/*滚动条凸出部分的颜色(前景色),包括两端的方形按钮、水平或竖直滑动的滑块的颜色*/
scrollbar-track-color:#FFF;/*滚动条的背景颜色,如果省略的话将出现虚点，颜色将采用face-color的颜色*/
scrollbar-arrow-color:#FFF;/*按钮(上下或者左右可以点击使滑块滚动的方形按钮)上三角箭头的颜色*/
scrollbar-3dlight-color:#0F0;/*滚动条亮边的颜色,形成3D效果，有层次感，肉眼观察在滚动条左边及上边出现一条有色线（竖直方向滚动）*/
scrollbar-darkshadow-color:#00F;/*滚动条强阴影的颜色,肉眼观察出现滚动条下边及右边*/
scrollbar-highlight-color:#F0F;/*滚动条空白部分的颜色,肉眼观察改变不明显，具体颜色改变出现在左边和上边空白处，介于face-color效果与3dlingt-color效果之间有个空白颜色（默认为白色）。此外，滚动条前景色有种凹陷的感觉，周边线条颜色凸起*/
scrollbar-shadow-color:#006600;/*立体滚动条阴影的颜色，具体出现在滑块及方形按钮的右边及下边，形成阴影效果，颜色介于face-color效果和darkshadow-color效果之间，不是很明显*/
scrollbar-base-color:#0f0;/*滚动条的基本颜色,当前面7个效果出现时，滚动条基本颜色设置肉眼很难观察到，如果不设置前面7个效果,系统将根据base-color自动设置，其中前景色，背景色(虚点表示)颜色一致，其他效果(阴影以黑色填充),没有什么要求时，建议不设置此效果*/

如果没有要做这个效果，也许我永远不知道！实践是检验真理的最好办法，真的不错！