<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>table</title>
<style>
table tr:first-child{background:#0066CC; color:#fff;font-weight:bold;} /第一行标题蓝色背景/
table{border-top:1pt solid #C1DAD7;border-left:1pt solid #C1DAD7;margin: 0 auto;}
table td{ padding:5px 10px; text-align:center;border-right:1pt solid #C1DAD7;border-bottom:1pt solid #C1DAD7;}
table tr:nth-of-type(even){ background:#F5FAFA;} / odd 标识奇数行，even标识偶数行 /
table tr:hover{ background: #E0F0F0;} /鼠标悬停后表格背景颜色/
</style>
<!--直接写一个class就可以了，这样方便，不 *** 作所有的table（深圳网站建设:wwwsz886com）-->
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="table">
<tbody><tr>
<td><div align="left" class="STYLE1">neirong1</div></td>
</tr>
<tr>
<td><div align="left">neirong2</div></td>
</tr>
<tr>
<td><div align="left">neirong3</div></td>
</tr>
</tbody></table><br /><br/>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td><div align="left">neirong4</div></td>
</tr>
<tr>
<td><div align="left">neirong5</div></td>
</tr>
<tr>
<td><div align="left">neirong6</div></td>
</tr>
</tbody></table><br /><br/>
</body>
</html>
1、首先新建一个web项目，主要用到了html文件和css文件。
2、然后在html文件中，有图中的代码，引入css文件和设置一个div标签。
3、然后这里是css样式文件，主要看图中红框中内容，使用fixed定位方式。
4、运行项目后，可以看到div在右下角（为了模拟这里的body高度设置很高，足够滚动条下拉到底部的）。
5、然后滑动滚动条，即使到达底部后，div的位置依旧没有修改，就完成了。
1、完全隐藏 在boby里加入scroll=no，可隐藏滚动条； boby scroll=no
2、在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条；反之，则显示； boby scroll=auto
3、样式
1、完全隐藏
在<boby>里加入sroll="no"，可隐藏滚动条；
2、在不需要时隐藏
指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条；反之，则显示；
3、样式表方法
在<boby>里加入style="overflow-x:hidden "，可隐藏水平滚动条；加入style="overflow-y:hidden "，可隐藏垂直滚动条。
这种方法在页面头部为：<!DOTYPE html PUBLI "-//W3//DTD XHTML 10 Trsitiol//E" "">这种兼容模式下是不行的，其它的没试过，最后终于找到了正确的方法：
被包含页面里加入
<style>
html { overflow-x:hidden ; }
</style>
有一段解释是这样说的：body{ overflow-x:hidden ; }在标准 DTD 下是不可以的。
4、另一种方法
<style type="text/ss">
body {
overflow-x:hidden ; /隐藏水平滚动条/
overflow-y:hidden ; /隐藏水平滚动条/
}
</style>
此方法在页面头部为：<!DOTYPE html PUBLI "-//W3//DTD XHTML 10 Trsitiol//E" "">这种兼容模式下也是不行的。
<style type="text/ss">
html {
overflow-x:hidden ; /隐藏水平滚动条/
overflow-y:hidden ; /隐藏水平滚动条/
}
</style>
在css设置可改变大小的div滚动条样式方法：
1首先新建html文档，进入代码书写界面。
2在</head>和<body>的里面写入代码，在<div>里面写入想要输入的内容</div>。
3书写外层轨道css代码。body::-webkit-scrollbar { width:20px; height:2px; background:#ccc; border-radius:10px;/外层轨道/}
这里主要是设置外层轨道的形状和颜色。
4书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:block; width:6px; margin:0 auto; border-radius: 10px; background:red;/内层轨道/}
这里主要是设置内层轨道的形状和颜色。
5代码工作做完后，就可以查看效果，效果如下红框所示，滚动条设置完成。
指定文档类型,给所有父对象指定高度,给三个DIV指定30%高,并设overflow:auto;如:
<!DOCTYPE html>
<html style="height:100%;">
<body style="height:100%;">
<div style="height:30%; overflow:auto;">1</div>
<div style="height:30%; overflow:auto;">2</div>
<div style="height:30%; overflow:auto;">3<div style="height:1000px;"></div></div>
</body>
</html>
在网页的<head></head>标签中间加上
<style>
table {
border-left: 1px solid #C1DAD7/边框颜色/;
border-top: 1px solid #C1DAD7/边框颜色/;
}
td {
border-right: 1px solid #C1DAD7/边框颜色/;
border-bottom: 1px solid #C1DAD7/边框颜色/;
}
</style>
在table外面,加一个div,设置高度和宽度,然后设置一下overflow:auto 就可以了 。
html表格由 <table> 标签来定义。
每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、、列表、段落、表单、水平线、表格等等。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）