【css布局题】 给表格加滚动条(有图有素材)

priestmoon 2010-04-09 04:18:45
没有加滚动条的表格看起来是下面的样子





加了滚动条的表格看起来是下面的样子




要求:
① 第一列(empno)固定,不受水平滚动条影响。
② 表头不受垂直滚动条影响,但除第一列以外的列(含表头)受水平滚动条控制。
③ 记录显示数恒等于5条。
...全文
1817 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
wwwzengyi 2010-08-20
  • 打赏
  • 举报
回复
<HTML>
<HEAD>
<TITLE>Scrol table sample</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Author" CONTENT="51windows,??,haiwa">
<META NAME="Description" CONTENT="Power by 51windows.Net">
</HEAD>

<BODY>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3"/>
<div id="wins" style="height:200;width:100%;overflow:auto;background:#EEEEEE;">
<table border="1" cellpadding="0" cellspacing="0">
<tr class="heading">
<td>empno</td>
<td>ename</td>
<td>job</td>
<td>manager</td>
<td>hiredate</td>
<td>salary</td>
<td>commit</td>
<td>deptno</td>
<td>dname</td>
</tr>
<tr>
<td>7000</td>
<td>Tom</td>
<td>clerk</td>
<td>7001</td>
<td>2001/1/1</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7001</td>
<td>Jack</td>
<td>salesman</td>
<td>7002</td>
<td>2001/1/2</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7002</td>
<td>Addison</td>
<td>clerk</td>
<td>7003</td>
<td>2001/1/3</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7003</td>
<td>Frank</td>
<td>salesman</td>
<td>7004</td>
<td>2001/1/4</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7004</td>
<td>Robin</td>
<td>accounting</td>
<td>7005</td>
<td>2001/1/5</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7000</td>
<td>Tom</td>
<td>clerk</td>
<td>7001</td>
<td>2001/1/1</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7001</td>
<td>Jack</td>
<td>salesman</td>
<td>7002</td>
<td>2001/1/2</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7002</td>
<td>Addison</td>
<td>clerk</td>
<td>7003</td>
<td>2001/1/3</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7003</td>
<td>Frank</td>
<td>salesman</td>
<td>7004</td>
<td>2001/1/4</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7004</td>
<td>Robin</td>
<td>accounting</td>
<td>7005</td>
<td>2001/1/5</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
</table>
</div>
<td valign="top"><span onmouseover='scrollb=setInterval("wins.scrollLeft-=10",100)' onmouseout=clearInterval(scrollb)></span> <span onmouseover='scrollb=setInterval("wins.scrollTop-=10",100)' onmouseout=clearInterval(scrollb)></span></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td valign="bottom"><span onmouseover='scrollb=setInterval("wins.scrollLeft+=10",100)' onmouseout=clearInterval(scrollb)></span> <span onmouseover='scrollb=setInterval("wins.scrollTop+=10",100)' onmouseout=clearInterval(scrollb)></span></td>
</tr>
</table>
</BODY>
</HTML>
app_code 2010-04-14
  • 打赏
  • 举报
回复
<html>
<head>
<title>页面滚动条</title>
<style>
<!--
body{ /* 页面滚动条 */
background-color:#efe5e2;
scrollbar-3dlight-color: #B0C4DE;
scrollbar-arrow-color: #34547E;
scrollbar-base-color: #FF0000; /* 基调颜色 */
scrollbar-darkshadow-color: #1D4272;
scrollbar-face-color: #CFDFF4;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #5380BA;
}
.largetext { /* 文本框滚动条 */
scrollbar-3dlight-color: #B0C4DE;
scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #8BA9CF;
scrollbar-darkshadow-color: #436DA3;
scrollbar-face-color: #34547E;
scrollbar-highlight-color: #E6ECF4;
scrollbar-shadow-color: #000000;
}
-->
</style>
</head>
<body>
<textarea rows="6" cols="50" class="largetext">
表格内容
</textarea>
</body>
</html>
zkyy66 2010-04-14
  • 打赏
  • 举报
回复
你试试code
priestmoon 2010-04-14
  • 打赏
  • 举报
回复
still waiting……
priestmoon 2010-04-12
  • 打赏
  • 举报
回复
waiting……
priestmoon 2010-04-11
  • 打赏
  • 举报
回复
空谈无用,代码才是硬道理!
  • 打赏
  • 举报
回复
一个table不能实现,采用上面和第一列为div或者另外的table可以实现
把要有滚动条的table放到一个div里面,然后设置div的css为固定的宽和高,然后overflow:scroll应该可以,你尝试下
priestmoon 2010-04-10
  • 打赏
  • 举报
回复
楼上就不要发无用的参考资料了。
一句话,能给出代码解决问题的,30分就归您!
jonas 2010-04-09
  • 打赏
  • 举报
回复
http://www.diysys.com有很多关于php,mysql,js,css的信息,适合新手和进阶者
mykelly6 2010-04-09
  • 打赏
  • 举报
回复
priestmoon 2010-04-09
  • 打赏
  • 举报
回复
素材HTML:



<html>
<head>
<title></title>
<style type="text/css">
table,td {border:solid 1px black; border-collapse:collapse; text-align:center;}
.heading { font-weight:bold; color:red; background-color:#FFFF99;}
</style>
</head>
<body>
<table cellpadding="2" cellspacing="0">
<tr class="heading">
<td>empno</td>
<td>ename</td>
<td>job</td>
<td>manager</td>
<td>hiredate</td>
<td>salary</td>
<td>commit</td>
<td>deptno</td>
<td>dname</td>
</tr>
<tr>
<td>7000</td>
<td>Tom</td>
<td>clerk</td>
<td>7001</td>
<td>2001/1/1</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7001</td>
<td>Jack</td>
<td>salesman</td>
<td>7002</td>
<td>2001/1/2</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7002</td>
<td>Addison</td>
<td>clerk</td>
<td>7003</td>
<td>2001/1/3</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7003</td>
<td>Frank</td>
<td>salesman</td>
<td>7004</td>
<td>2001/1/4</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7004</td>
<td>Robin</td>
<td>accounting</td>
<td>7005</td>
<td>2001/1/5</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7000</td>
<td>Tom</td>
<td>clerk</td>
<td>7001</td>
<td>2001/1/1</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7001</td>
<td>Jack</td>
<td>salesman</td>
<td>7002</td>
<td>2001/1/2</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7002</td>
<td>Addison</td>
<td>clerk</td>
<td>7003</td>
<td>2001/1/3</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7003</td>
<td>Frank</td>
<td>salesman</td>
<td>7004</td>
<td>2001/1/4</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7004</td>
<td>Robin</td>
<td>accounting</td>
<td>7005</td>
<td>2001/1/5</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
</table>
</body>
</html>
bhbhxy 2010-04-09
  • 打赏
  • 举报
回复
坐等高手

61,128

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧