您的位置：首页 > Web前端 > HTML

HTML滚动条

2017-01-15 23:13 169 查看 
滚动条第一种方式：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS linear-gradient()_CSS3</title>
<style>
</style>
</head>
<body>
<div style="overflow: auto; height: 100px; width:200px;">
<table id="table" border="1" align="center" width="300px" height="200px">
<tbody>
<tr><td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td></tr>
<tr><td>10</td><td>11</td><td>12</td><td>13</td><td>15</td><td>15</td></tr>
<tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
<tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>
</tbody>

</table>
</body>
</div>
</body>
</html>
滚动条第二种方式：


<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS linear-gradient()_CSS3</title>
<style>
</style>
</head>
<body>
<div style="width:300px">
<table id="table" border="1" align="center" width="300px">
<thead>
<tr><th>标题</th><th>标题</th><th>标题</th><th>标题</th><th>标题</th><th>标题</th></tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div style="overflow: auto; height: 100px;width:320px">
<table id="table" border="1" align="center" width="300px" height="200px">
<tbody>
<tr><td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td></tr>
<tr><td>10</td><td>11</td><td>12</td><td>13</td><td>15</td><td>15</td></tr>
<tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
<tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>
</tbody>

</table>
</body>
</div>
</body>
滚动条第三种方式(第二种方法机场会出现列不对齐的情况)：


<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS linear-gradient()_CSS3</title>
<style>
</style>
</head>
<body>
<div style="width:300px">
 <div style="width:300px"> <table id="table" border="1" align="center" width="300px"> <thead> <tr><th>标题</th><th>标题</th><th>标题</th><th>标题</th><th>标题</th><th>标题</th></tr> </thead> <tbody> </tbody> </table></div> <div style="overflow:
auto; height: 100px;width:320px"> <table id="table" border="1" align="center" width="300px" height="200px"> <tbody> <tr><td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td></tr> <tr><td>10</td
4000
><td>11</td><td>12</td><td>13</td><td>15</td><td>15</td></tr>
<tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr> <tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr> </tbody> </table> </body> </div>

</div>


</body>


</html>

滚动条第四种方式：


<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8" />

<title>CSS linear-gradient()_CSS3</title>

<style>
.table thead tr {
display:block;
}
.table tbody {
display: block;
height: 150px;
overflow: auto;
}

</style>

</head>

<body>
<table class="table">
<thead>
<tr>
<th>姓名</th>
<th>工号</th>
<th>年龄</th>
<th>部门</th>
<th>工资</th>
</tr>
</thead>
<tbody>
<tr>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
</tr>
<tr>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
</tr>
<tr>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
</tr>
<tr>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
</tr>
<tr>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
</tr>
<tr>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
</tr>
<tr>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
</tr>
</tbody>
</table>

</body>
</html>
总结
1． overflow内容溢出时的设置（设定被设定对象是否显示滚动条）
    overflow-x水平方向内容溢出时的设置
    overflow-y垂直方向内容溢出时的设置
    以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

2． scrollbar-3d-light-color立体滚动条亮边的颜色（设置滚动条的颜色）
    scrollbar-arrow-color上下按钮上三角箭头的颜色
    scrollbar-base-color滚动条的基本颜色
    scrollbar-dark-shadow-color立体滚动条强阴影的颜色
    scrollbar-face-color立体滚动条凸出部分的颜色
    scrollbar-highlight-color滚动条空白部分的颜色
    scrollbar-shadow-color立体滚动条阴影的颜色









                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                web前端
                                                浏览器
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航